CSS中的 animation 属性可以让很多其它CSS属性产生动画效果,比如color,background-color, height, width等。当然,你需要为每个动画定义@keyframes CSS规则,animation需要调用这些@keyframes产生动画效果,比如:

  1. .element { 
  2.   animation: pulse 5s infinite; 
  3.  
  4. @keyframes pulse { 
  5.   0% { 
  6.     background-color#001F3F
  7.   } 
  8.   100% { 
  9.     background-color#FF4136
  10.   } 

在每个 @keyframes CSS规则里面,我们需要定义动画发生的阶段时间和变化样式。例如,0% 表示动画的开始阶段,100% 表示动画的结束时刻。animation属性里引用 keyframes 有一种简写方式,展开来一共有8个子属性,通过它们,我们可以控制各种的动画过程。

子属性
animation-name: 指定一个 @keyframes 的名称,动画将要使用这个@keyframes定义。
animation-duration: 整个动画需要的时长。
animation-timing-function: 动画进行中的时速控制,比如 ease 或linear.
animation-delay: 动画延迟时间。
animation-direction: 动画重复执行时运动的方向。
animation-iteration-count: 动画循环执行的次数。
animation-fill-mode: 设置动画执行完成后/开始执行前的状态,比如,你可以让动画执行完成后停留在最后一幕,或恢复到初始状态。
animation-play-state: 暂停/启动动画。
这些属性可以这样使用:
  1. @keyframes stretch { 
  2.   /* declare animation actions here */ 
  3.  
  4. .element { 
  5.   animation-name: stretch; 
  6.   animation-duration: 1.5s;  
  7.   animation-timing-function: ease-out;  
  8.   animation-delay: 0
  9.   animation-direction: alternate; 
  10.   animation-iteration-count: infinite; 
  11.   animation-fill-mode: none
  12.   animation-play-state: running;  
  13.  
  14. /* 
  15.   等同于: 
  16. */ 
  17.  
  18. .element { 
  19.   animation:  
  20.     stretch 
  21.     1.5
  22.     ease-out 
  23.     0 
  24.     alternate 
  25.     infinite 
  26.     none 
  27.     running; 
多阶段动画

 

如果一个动画的起始状态和终止状态是一样的,那么,你可以用逗号分隔 0% 和 100% 的形式在 @keyframes 里声明:
  1. @keyframes pulse { 
  2.   0%100% { 
  3.     background-color: yellow; 
  4.   } 
  5.   50% { 
  6.     background-colorred
  7.   } 

多样动画
我们还可以一次声明多种动画效果,用逗号分隔。在下面的例子中,我们将会让圆圈的颜色发生变化,同时还会轻推它,让它来回移动。

  1. .element { 
  2.   animation:  
  3.     pulse 3s ease infinite alternate,  
  4.     nudge 5s linear infinite alternate; 
性能
CSS动画中的很多动画属性都需要关注执行性能,在使用一个动画前,你需要了解它的运行原理。然而,下面这些CSS动画技术的组合使用是很安全的,我们可以放心使用:
transform: translate()
transform: scale()
transform: rotate()
opacity
返回顶部