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

CSS Transition

在CSS 3引入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, linear:匀速;ease-in:加速;ease-out:减速;cubic-bezier函数:自定义速度模式*/
transition-timing-function: ease;
}

.animation2:hover {
height: 200px;
width: 200px;
background: blue;
}

添加动画效果后:



transition的使用注意

  1. 目前,各大浏览器(包括IE10)都已经支持无前缀的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的优点在于简单易用,但是它有几个很大的局限。

  • 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关键字用来定义动画的各个状态,它的写法相当自由。
@keyframes rainbow {
0% { background: #c00 }
50% { background: orange }
100% { background: yellowgreen }
}


0%可以用from代表,100%可以用to代表,因此上面的代码等同于下面的形式。
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}


如果省略某个状态,浏览器会自动推算中间状态,所以下面都是合法的写法。
@keyframes rainbow {
50% { background: orange }
to { background: yellowgreen }
}

@keyframes rainbow {
to { background: yellowgreen }
}


甚至,可以把多个状态写在一行。
@keyframes pound {
fromto { transform: none; }
50% { transform: scale(1.2); }
}


另外一点需要注意的是,浏览器从一个状态向另一个状态过渡,是平滑过渡。steps函数可以实现分步过渡。
div:hover {
animation: 1s rainbow infinite steps(10);
}


例子

### animation-play-state
有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态。
.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

转载请标注原文地址