前端CSS3动画animation用法
前端CSS3动画animation用法
学习如下动画属性
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation-play-state
- animation
1. @keyframes
@keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式
要使动画生效，必须将动画绑定到某个元素
用法1
点击查看代码
@keyframes anim {
from {background-color: red;}
to {background-color: blue;}
}
anim为动画的名称
from定义动画开始时小方块的背景色为红色
from定义动画结束时小方块的背景色为蓝色
用法2
点击查看代码
@keyframes anim {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
0%定义动画开始（完成0%）时小方块的背景色为红色
25%定义动画在完成25%时小方块的背景色为黄色
50%定义动画在完成50%时小方块的背景色为蓝色
100%定义动画结束（完成100%）时小方块的背景色为绿色
2. animation-name
@keyframes anim { ... }
anim就是动画的名称
3. animation-duration
动画完成一个周期应花费的时间（以秒或毫秒为单位）
animation-duration: 2s | 2000ms;
4. animation-delay
动画开始的延迟时间（以秒或毫秒为单位）
允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画（也就是动画提前两秒开始）
animation-delay: 2s;
5. animation-iteration-count
动画应播放的次数
animation-iteration-count: 3;
6. animation-direction
动画是向前播放、向后播放还是交替播放
animation-direction: normal | alternate;
- normal：（默认）动画应该正常播放
- alternate：动画应该轮流反向播放
7. animation-timing-function
动画的速度曲线
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
- linear：动画从头到尾的速度是相同的
- ease：（默认）动画以低速开始，然后加快，在结束前变慢
- ease-in：动画以低速开始
- ease-out：动画以低速结束
- ease-in-out：动画以低速开始和结束
- cubic-bezier(n,n,n,n)：在cubic-bezier函数中定义自己的值。可能的值是从0到1的数值
8. animation-fill-mode
元素在不播放动画时的样式（在开始前、结束后，或两者同时）
animation-fill-mode : none | forwards | backwards | both;
- none：（默认）不改变
- forwards：当动画完成后，保持最后一个属性值(在最后一 个关键帧中定义)
- backwards：在animation-delay所指定的一段时间内， 在动画显示之前，应用开始属性值(在第一个关键帧中定义)
- both：向前和向后填充模式都被应用
9. animation-play-state
动画的运行与暂停
animation-play-state: paused | running;
- paused：规定动画已暂停
- running：规定动画正在播放
10. animation
设置所有动画属性的简写属性
animation: name duration timing-function delay iteration-count direction;
动画名称 动画时长 动画速度曲线 动画延时 动画播放次数 动画是否应该轮流反向播放
