CSS3动画简介
![](http://yyk.iask.sina.com.cn/pic/fimg/160992417009376973201.jpg)
最初接触页面元素动画是jquery的animate函数,这个函数结合其他jquery方法基本可以满足各种动画需求。但随着css的快速发展,不用javascript同样也可以做出绚丽的动画效果。css3中可以设置动画效果的属性有两个:Transition和Animation,下面就简单介绍一些这两个属性的使用。
操作方法01
transition相对简单,只需要指定以下几个属性即可。transition-property:参与过渡的属性,比如 height、width等css样式,所有样式用关键字“all”,没有样式需要过渡使用“none”。transition-duration:过渡持续的时间,单位是秒(s),比如 width从100px过渡到200排序需要的时间。transition-timing-function:过渡的动画类型,有以下几种取值。linear:线性过渡,等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。ease:平滑过渡,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)。ease-in:由慢到快,等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。ease-out:由快到慢,等同于贝塞尔曲线(0, 0, 0.58, 1.0)。ease-in-out:由慢到快再到慢,等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。cubic-bezier(
animation与transition有几个相同的属性,duration、timing-function、delay。animation-name:animation需要指定动画的名字,这个是用来在@keyframes中指定执行动画的样式。animation-durarion:动画的执行时间,单位s(秒)。animation-timing-function:动画类型,取值与transition相同。animation-delay:动画延迟时间,单位s(秒)。animation-iteration-count:动画执行的次数,这个属性就客服了transition局限中的第二条,取值可以是数字指定具体循环几次,也可以设置关键字“infinite”无限循环。animation-direction:动画在循环执行时是否反方向,取值“normal”正常方向、“alternate”正常与反向交替。animation-play-state:设置执行中动画的状态,取值“running”、“paused”。animation-fill-mode:设置动画执行时间之外的状态,取值“none”(默认,不设置)、forwards(动画结束时的状态)、“backwards”(动画开始时的状态)、“both”(开始或结束时的状态)。动画中的每个属性都介绍完毕之后,其实你应该还是一头雾水,这怎么可能产生动画,关键在于@keyframes中。----------------------------@keyframes-----------------------------给一个例子:@keyframes rainbow {from { background: #c00 }50% { background: orange }to { background: yellowgreen }}用百分比的形式表示一个动画周期中的各个状态,其中0%、100%可以分别用from、to表示,每个百分点的状态可以当做一个css class,可以设置多个样式哦,rainbow 就是animation-name的值。-------------------------------END------------------------------------至此CSS3的两种动画设置方式就简略的介绍完了。
![](http://yyk.iask.sina.com.cn/pic/fimg/160992417009376973201.jpg)