前端CSS3动画animation用法

前端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;

动画名称 动画时长 动画速度曲线 动画延时 动画播放次数 动画是否应该轮流反向播放