CSS 动画的两大组成部分:transition 和 animation。

translate

CSS Transition

在 CSS3 引入 Transition(过渡)这个概念之前,CSS 是没有时间轴的。也就是说,所有的状态变化,都是即时完成。如下:

.animation1 {
  height: 100px;
  width: 100px;
  background: red;
}

.animation1:hover {
  height: 200px;
  width: 200px;
  background: blue;
}
示例:

transition 的基本使用

.animation2 {
  height: 100px;
  width: 100px;
  background: red;
  /* 规定设置过渡效果的 CSS 属性的名称。 */
  transition-property: background width height;
  /* 定义过渡效果何时开始。 */
  transition-delay: 0s;
  /* 规定完成过渡效果需要多少秒或毫秒。 */
  transition-duration: 2s;
  /* 
    规定速度效果的速度曲线。
    默认为ease:规定慢速开始,然后变快,然后慢速结束的过渡效果,加速更快,减速更慢cubic-bezier(0.25, 0.1, 0.25, 1)
    linear:匀速, 
    ease-in:加速, 
    ease-out:减速,
    ease-in-out:慢速开始和结束, 加速和减速的速度相同 cubic-bezier(0.42, 0, 0.58 1)
    cubic-bezier函数:自定义速度模式(贝塞尔曲线)
    */
  transition-timing-function: ease;
}

.animation2:hover {
  height: 200px;
  width: 200px;
  background: blue;
}
添加动画效果后:

transition 的使用注意

  • 目前,各大浏览器(包括 IE10)都已经支持无前缀的 transition,所以 transition 已经可以很安全地不加浏览器前缀。
  1. 不是所有的 CSS 属性都支持 transition,完整的列表查看这里,以及具体的效果

  2. transition 需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height 从 0px 变化到 100px,transition 可以算出中间状态。但是,transition 没法算出 0px 到 auto 的中间状态,也就是说,如果开始或结束的设置是 height: auto,那么就不会产生动画效果。类似的情况还有,display: none 到 block,background: url(foo.jpg)到 url(bar.jpg)等等。

transition 的局限

transition 的优点在于简单易用,但是它有几个很大的局限。

  • transition 需要事件触发,所以没法在网页加载时自动发生。
  • transition 是一次性的,不能重复发生,除非一再触发。
  • transition 只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
  • 一条 transition 规则,只能定义一个属性的变化,不能涉及多个属性。

CSS Animation 就是为了解决这些问题而提出的。

CSS Animation

CSS Animation 需要指定动画一个周期持续的时间,以及动画效果的名称。

CSS Animation 的基本使用

.animation3 {
  height: 100px;
  width: 100px;
  border: 1px solid #777;
}

.animation3:hover {
  /* 为 @keyframes 动画规定名称 */
  animation-name: myanimation;
  /* 定义动画完成一个周期所需要的时间 */
  animation-duration: 2s;
  /* 规定动画的速度曲线。ease默认。动画以低速开始,然后加快,在结束前变慢。linear:匀速;ease-in:加速;ease-out:减速;cubic-bezier函数:自定义速度模式 ease-in-out 动画以低速开始和结束。  */
  animation-timing-function: linear;
  /* 定义动画何时开始。 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。*/
  animation-delay: 0s;
  /* 定义动画的播放次数。n 定义动画播放次数的数值。infinite 规定动画应该无限次播放。 */
  animation-iteration-count: infinite;
}

当鼠标悬停在 div 元素上时,会产生名为 myanimation 的动画效果,持续时间为 2 秒。为此,我们还需要用 keyframes 关键字,定义 myanimation 效果。myanimation 效果一共有三个状态,分别为起始(0%)、中点(50%)和结束(100%)。如果有需要,完全可以插入更多状态。

@keyframes myanimation {
  0% {
    background: red;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

效果如下:



animation-fill-mode

动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,需要使用 animation-fill-mode 属性。animation-fill-mode 还可以使用下列值:

  • none:默认值,回到动画没开始时的状态。
  • forwards:当动画完成后,保持最后一个属性值
  • backwards:让动画回到第一帧的状态。
  • both: 根据 animation-direction(见后)轮流应用 forwards 和 backwards 规则。




### animation-direction
动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性,可以改变这种行为。

默认情况是,animation-direction 等于 normal。还可以等于取 alternate、reverse、alternate-reverse 等值。它们的含义见下图(假定动画连续播放三次)。



### keyframes 的写法

keyframes 关键字用来定义动画的各个状态,它的写法相当自由。

css @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }

0%可以用 from 代表,100%可以用 to 代表,因此上面的代码等同于下面的形式。

css @keyframes rainbow { from { background: #c00; } 50% { background: orange; } to { background: yellowgreen; } }

如果省略某个状态,浏览器会自动推算中间状态,所以下面都是合法的写法。

css @keyframes rainbow { 50% { background: orange; } to { background: yellowgreen; } } @keyframes rainbow { to { background: yellowgreen; } }

甚至,可以把多个状态写在一行。

css @keyframes pound { from,to { transform: none; } 50% { transform: scale(1.2); } }

另外一点需要注意的是,浏览器从一个状态向另一个状态过渡,是平滑过渡。steps 函数可以实现分步过渡。

div:hover { animation: 1s rainbow infinite steps(10); }

例子

### animation-play-state

有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态。

css .animation6 { height: 100px; width: 100px; border: 1px solid #777; animation-name: myanimation; animation-duration: 2s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: infinite; animation-play-state: paused; } .animation6:hover { animation-play-state: running; } @keyframes myanimation { 0% { background: red; } 50% { background: blue; } 100% { background: green; } }





浏览器前缀

目前,IE10 和 Firefox(>=16)支持没有前缀的 animation,而 chrome 不支持,所以必须使用 webkit 前缀。也就是说,实际运用中,代码必须写成下面的样子。

div:hover {
  -webkit-animation: 1s myanimation;
  animation: 1s myanimation;
}

@-webkit-keyframes myanimation {
  0% {
    background: red;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

@keyframes myanimation {
  0% {
    background: red;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

参考连接:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html