CSS3的动画涉及到两个属性，一个就是transition过渡，一个就是animation动画。
01.transition过渡
W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
transition有下面这些属性：
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的CSS属性的名称 |
| transition-duration | 定义过渡效果花费的时间，默认是0 |
| transition-timing-function | 规定过渡效果的时间曲线，默认是“ease” |
| transtion-delay | 规定过渡效果何时开始，默认是0 |
其中transition-timing-function比较难理解，所以单独拎出来说。
| transition-timing-function属性值 | 描述 |
|---|---|
| ease | 中间快，两头慢 |
| linear | 匀速的 |
| ease-in | 开始的时候慢 |
| ease-out | 结束的时候慢 |
| ease-in-out | 中间快，两头慢，幅度比ease更大些 |
| cubic-bezier | 填四个值，自定义的贝塞尔曲线。所有值需在[0, 1]区域内，否则无效。 |
| steps | (步骤次数，[start/end]) |
其中像ease-in、ease等都可以用cubic-bezier自定义的贝塞尔曲线来写，所以cubic-bezier有必要弄清楚些它的原理。
cubic-bezier
多个属性名连写可以这样写：
transition: background 0.5s ease-in,left 0.3s steps(3,start);
其中transition-property就是background、left，transition-duration就是0.5s,0.3s，也就是过渡效果花费的时间。ease-in、 steps(3,start)就是怎样过渡的曲线。
如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如：
transition: all 0.5s ease-in;
02.animation动画
有时候，transition过渡不能解决我们想要的动画效果，我们希望动画的过渡程度更加复杂有层次，这个时候就要用到animation。
animation有下面这些属性。
| 属性 | 描述 |
|---|---|
| animation | 简写属性，用于在一个属性中设置8个动画属性 |
| animation-name | 规定需要绑定到选择器的keyframe名称 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。跟transition一样。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。默认1，也可以是infinite无限次 |
| animation-direction | 规定是否应该轮流反向播放动画。值为nomal\reverse\alternate\alternate-reverse。意思分别是正方向\反方向\往返\反方向的往返。 |
| animation-fill-mode | 规定动画开始的时候是否要保持开始的第一帧，结束是否保持最后一帧。其值为none\backwards\forwards\both。分别意思是不保持，开始保持，结束保持，和都保持。通常情况下是both设置。 |
| animation-play-state | 规定动画暂停还是播放，值为paused\running。一般搭配鼠标hover时候使用，比如鼠标移上去就动了的效果，就设置running。 |
写法
animation:none;
animation:abc 2s ease 0s 1 nomal none running;
animation:abc 2s;
animation:abc 1s 2s both,abcd 2s both;
其中abc就是keyframe名称。如何定义keyframe的名称呢？有两种写法：
@keyframes abc{
from{opacity:1;height:100px;}
to{opacity:0.5;height:200px;}
}
@keyframes abc{
0%{opacity:1;height:100px;}
50%{opacity:0.8;height:200px;}
100%{opacity:0.5;height:300px;}
}
分别是定义开始的状态属性参数，定义中间的状态属性参数，和定义结束时候的状态属性参数。
当然如果属性参数是一样的，我们可以组合起来写，看下面：
@keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
那么定义了keyframes名称用来干嘛呢，就是下面的用处了，把 "keyframes名称" 捆绑到元素中去，比如div。
div {
animation:abc 0.5s both;
animation:flash 0.5s both;
animation:abc 0.5s both,flash 0.5s both;
}
animation可以综合写一行，把所有的表格中的属性按照表格里上下的顺序写，也可以分开animation的每个属性分开单独写。
网友评论