CSS3动画——animation&transition

动画一般有CSS动画和JS动画，另外其实还可以用计时器写动画，或者canvas里去绘制，这些就不提，这篇主要来说CSS动画。这里姑且是把transition也归类为动画的。

CSS动画有animation（动画）和transition（过渡），我们分开来讲：

animation

来看一个简写的animation用法

div
{
animation:mymove 5s infinite;
}

这里写了的三个参数分别是@keyframes(动画规则),动画时长以及重复播放次数。其中mymove就是一个@keyframes的name，所以在学习了解animation之前，我们需要先知道@keyframes。

@keyfreames事实上是由元素的若干个状态组成的，最简单的情况是开始和结束的状态，例如：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

那么这个动画就是把背景色从红色变为黄色，具体怎么去播放这个动画，在animation里面控制；

animation的动画属性包括

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

其中，name和duration是必须定义的，duration不定义为默认为0,0秒也就不存在动画了。

一个虽然简单但是完整的例子如下：

@keyframes mymove
{
from {background: red;}
to {background: yellow;}
}
div
{
animation:mymove 5s;
}

transition

transition的语法是这样子的

transition: property duration timing-function delay;

transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

 

property用来指定要改变的属性，比如width；

duration的要加 s||ms，不写则为默认值0，就没有动画效果。

delay顾名思义，延迟多久的意思。

timing-function有linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)这些值，cubic-bezier是自定义。

一个完整的transition例子：

div
{
width:100px;
transition: width 2s;
}
div:hover {width:300px;}

animation和transition的比较

animation功能更加强大，完成更复杂的动画效果，可以加载之后自动运行，可以设置播放次数等，也就是说应用场景更广泛；

transition是不会自动运行的，必须要有事件触发，每触发一次就执行一次，一个transition只能设置一条属性，多个属性设置的时候要这样子写：

transition: width 2s ease-in-out, height 2s ease-in-out;//逗号隔开

常用的触发事件是hover，我们经常看到的网页上鼠标移动到某个元素上就播放一个小动画可以使用transition；