你的位置:首页 > 网页设计

[网页设计]CSS3中的变形与动画


  最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画。其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速,性能更好


   (下面均没写浏览器前缀,如有需要请自行添加~~)

CSS3常见的动画效果的实现,其实主要是靠 transitionanimation 。 而通常,这两个又会和CSS3中的新属性 transform 来搭配使用

那么这三个东西其实是干什么用的呢?我按我自己的理解来下个简单结论。

transform:把元素变形;

transition:元素的属性变化时,给他一个过渡的动画效果;

animation:做复杂动画。


 

下面来详细地说一下。

首先要说的是transform的语法:  

transform:none | transform-functions ;

none是他的默认值,后面的transform-functions指的是变形函数;

变形函数分两种:2D和3D;// 相关语法可以在http://www.w3school.com.cn/cssref/pr_transform.asp查询


 

其中2D的包括:(变形的以元素中心为基准,即X轴和Y轴的50%处)

  translate()    //包括translateX() 和 translateY(); 作用:根据XOY坐标来移动元素(X方向右边为正,Y方向下边为正);

  scale()      //包括scaleX() 和 scaleY(); 作用:放大或者缩小元素;

  rotate()    //  作用:旋转元素;

  skew()     // 包括 skewX() 和 skewY(); 作用:让元素倾斜。

 

而3D的就多了Z轴,相关语法可以在W3C查到,这里重点推荐张鑫旭大神写的一篇文章 (http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/) ,对于变形的讲解通俗易懂。对于文章里面说到的语法可以搭配后面这个模拟器来配合食用,效果更佳~ (http://fangyexu.com/tool-CSS3Inspector.html )

  我来总结几个点:1、进行3D变形时,变形的元素外面要先包两层标签 一个作为舞台,一个作为容器。

舞台  容器    元素    元素    ...

  //我个人的理解是,如果舞台上的元素被当做一个整体来看待的话,可以只加一层标签,即把舞台看作容器

舞台(容器)  元素  元素  ...

  

  2、在舞台的CSS上,设置 perspective (视距),意思就是假设人离舞台的距离。在容器的CSS上设置 transform-style: preserve-3d 来开启3D视图,让容器的子元素在3D空间中呈现。 //如果把舞台当做容器的话,perspective 和 transform-style 就写在一起。


 

 那么,是不是变形的基点只能是元素的中心呢?不是的。 transform-origin属性可以改变变形的基点。

 transform-origin的关键字一般的就 top / bottom / left / right / center / top left / top right 之类的啦大家都熟,其中的某些单个关键字其实是简写,例如 top = top center = center top ;

 


 

接着就是过渡动画 transition。

触发条件是 :hover / :focus / :active / :checked / JS中的事件 

语法: transition: 指定过渡的CSS属性 、 过渡所需时间 、 过渡的函数(动画的速度控制) 、 开始的延迟时间

指定过渡的CSS属性:all / 指定样式 / none (若省略不写,则为 all ,none一般用于清空动画)

过渡所需时间:单位s / ms (默认为0)

过渡的函数: ease(由快到慢 默认值) / linear(匀速) / ease-in(加速) / ease-out(减速) / ease-in-out(先加速后减速)/ cubic-bezier(三次贝塞尔曲线)

      具体细微差别可以到 http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp 模拟哦~

延迟时间:单位s / ms (默认为0)

(写transition的时候,先写 动画时间 , 再写延迟时间)


 

举个例子吧,博雅今年秋招的笔试题:

  用 CSS3 实现一个半径25px的圆 进行速度由快到慢的300px滚动。

div{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}div:active{ transform:translateX(300px) rotate(780deg);}

  贼简单吧~ 这里有几个细节,第一个就是 transition 是放在元素上,而不是 active 上,如果放在active上,就没有回去的动作了,大家可以试一下。

                第二个就是,transform多个属性的时候,中间用空格来隔开,如果用逗号的话就没反应了。

但如果我在 :active 上加上 transition,

div{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
div:active{ transform:translateX(300px) rotate(780deg);transition:2s ease-in;}

这样按住的时候,就会执行 active 里面的transition,也就是去的时候用时 2s ,加速运动;而回来的时候执行 div 里的transition ,用时1s 减速运动。


 

最后就到 animation 了~ animation也是做动画的,不过功能比 transition 更加强大,因为animation可以控制动画的每一步,而transition只能控制开头和结尾。

语法 animation: 关键帧动画名字 、 动画时间 、 动画播放方式(函数) 、 延迟时间 、 循环次数 、 播放方向 、 播放状态 、 动画时间外的属性 ;

关键帧动画名字:就是你要执行的动画的名字,这里要先知道关键帧的语法

@keyframes name{   0%{    ...      }    50%{    ...  }  100%{    ...  } }  

这里的关键帧的名字就是name ,然后百分比的就是动画的进度,可以根据需要设置不同的百分比,再设置不同的动画。

动画时间:和transition一样~

动画播放方式(函数):和transition的过渡的函数一样~

延迟时间:和transition一样~

循环次数:动画播放的次数,默认为1,通常为整数,如果为 infinite,则无限次地播放;

播放方向:默认为normal,就是正常地向前播放,还有一个值是 alternate ,就是先正向播放,再反向播放,不断地交替;

播放状态:running(默认) 、 paused // 像播音乐一样可以通过动作来暂停动画;

动画时间外的属性: none(默认) 、 forwards 、 backwards 、both;

  举个例子吧:

@keyframes color{  0%{ background:yellow}  100%{ background:blue}}div{ background:black}

  none:    动画开始前:黑  ; 动画结束后:黑

  forwards:  动画开始前:黑 ; 动画结束后:蓝

  backwards: 动画开始之前:黄 ; 动画结束后:黑

  both:    动画开始前:黄 ; 动画结束后:蓝

就是这么简单~


 

最后,说一下这三个属性在JS中的写法:

transform:

obj.style.transform = "translateX(100px) scale(2)";obj.style.webkitTransform = "translateX(100px) scale(2)";//带浏览器前缀

 

transition:

obj.style.transition = "1s";obj.style.webKitTransition = "1s";//带浏览器前缀

 

animation:

obj.style.animation = "name 1s ";//1、关键帧先在css写好;2、兼容写法在关键帧里面写;

 


 

这是我写的第一篇技术博客,感觉写的没啥条理和重点~而且感觉排版怪怪的,感觉写这种还是要做很多demo挂出来才比较方便~

以后争取一周写一篇,把每周学习到的知识都总结一下~