CSS3动画简介
最初接触页面元素动画是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(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。 transition-delay: 动画延迟执行的时间。 -------------------transition样式的写法--------------------- transition同background属性一样有缩写和拆分两种方式，就是说你可以把每个属性都加到transition后，如 transition: border-color .5s ease-in .1s; 也可以把这些属性拆分，分别设置在个属性之后，上边的缩写拆分后如下： transition-property: border-color; transition-duration: .5s; transition-timing-function: ease-in; transition-delay: .1s; 如果需要对个样式设置过渡动画，可以用逗号分开，缩写如： transition: border-color .5s ease-in .1s，color .3s ease .2s; 拆分写法如： transition-property: border-color, color; transition-duration: .5s, .3s; transition-timing-function: ease-in, ease; transition-delay: .1s, .2s; 拆分写法中如果某个属性是多组共用的，则不需要分别设置，比如： transition-duration: .5s, .5s; ---> transition-duration: .5s; 但是transition有几个很大的局限。 （1）transition需要事件触发，所以没法在网页加载时自动发生。 （2）transition是一次性的，不能重复发生，除非一再触发。 （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 所以就诞生了animation属性，相对transition略显复杂，但是功能更强大。
- 02
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的两种动画设置方式就简略的介绍完了。