css动画——transition和animation

2022-08-30 17:17:01

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

第一部分：CSS Transition

在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。

delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。

transition的使用注意

（1）目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。

（2）不是所有的CSS属性都支持transition。

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

transition的局限

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

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

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

第二部分：CSS Animation

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



div:hover {

  animation: 1s rainbow;

}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。



@keyframes rainbow {

  0% { background: #c00; }

  50% { background: orange; }

  100% { background: yellowgreen; }

}

同transition一样，animation也是一个简写形式。



div:hover {

  animation: 1s 1s rainbow linear 3 forwards normal;

}

这是一个简写形式，可以分解成各个单独的属性。



div:hover {

  animation-name: rainbow;

  animation-duration: 1s;

  animation-timing-function: linear;

  animation-delay: 1s;

    animation-fill-mode:forwards;

  animation-direction: normal;

  animation-iteration-count: 3;

}

浏览器前缀

目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。

也就是说，实际运用中，代码必须写成下面的样子。



div:hover {

  -webkit-animation: 1s rainbow;

  animation: 1s rainbow;

}

@-webkit-keyframes rainbow {

  0% { background: #c00; }

  50% { background: orange; }

  100% { background: yellowgreen; }

}

@keyframes rainbow {

  0% { background: #c00; }

  50% { background: orange; }

  100% { background: yellowgreen; }

}

码农公寓