CSS3动画

本文就自己的理解和使用，介绍CSS3中的动画部分。

CSS3可以自定义动画来取代传统的脚本实现动画。使用CSS动画有三个主要优点：

1. 学习成本低，不需要了解javascript就能够创建动画。

2. 运行效果好，浏览器的渲染引擎会在低性能机器上采用不同方法来保证动画表现，而使用javascript来实现动画，需要非常完美的设计。

3. 让浏览器来控制动画序列，运行浏览器优化动画。比如降低隐藏选项卡中的动画的更新频率。

@keyframes

使用@keyframes来定义动画。用法：

@keyframes animationname {keyframes-selector {css-styles;}}

animation

animation的子属性有：

animation-name:指定有@keyframes描述的关键帧名称

animation-duration:设置动画一个周期的时长

animation-timeing-function:设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

animation-delay:设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

animation-iteration-count:设置动画重复次数，可以指定infinite无限次重复动画

animation-direction:设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

举一个例子：

/* This is the animation code. */
@-webkit-keyframes example {
from { transform: scale(2.0); }
to   { transform: scale(1.0); }
}

/* This is the element that we apply the animation to. */
div {
-webkit-animation-name: example;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease; /* ease is the default */
-webkit-animation-delay: 1s;             /* 0 is the default */
-webkit-animation-iteration-count: 2;    /* 1 is the default */
-webkit-animation-direction: alternate;  /* normal is the default */
}

也可以使用更简单的方法：

div {
-webkit-animation: example 1s ease 1s 2 alternate;
}

至于关键帧keyframes，我们可以使用简单的属性变化，比如：

@-webkit-keyframes example {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}

也可以进行复杂的变换，那就得使用transform属性了。

transform

使用transform，元素可以按照设定的值变形、旋转、缩放、倾斜。

完整示例如下：

transform: none;
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);//矩阵变化
transform: translate(12px, 50%);//平移
transform: translateX(2em);//X方向平移
transform: translateY(3in);//Y方向平移
transform: scale(2, 0.5);//缩放
transform: scaleX(2);//X方向缩放
transform: scaleY(0.5);//Y方向缩放
transform: rotate(0.5turn);//旋转
transform: skewX(30deg);//X方向倾斜
transform: skewY(1.07rad);//Y方向倾斜
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
transform: translateX(10px) rotate(10deg) translateY(5px);

也可以查看具体API

要在keyframs中使用transform，只需要如下即可：

@keyframes testanimations{
from{transform:translate(0,0);}
20%{transform:translate(20,20);}
40%{transform:translate(40,0);}
60%{transform:translate(60,20);}
80%{transform:translate(80,0);}
to{transform:translate(100,20);}
}

需要完全掌握CSS3动画，还需要了解一个过渡属性transition。

transition

可设置

transition-property, transition-duration,transition-timing-function, transition-delay。

分别代表对哪个属性进行平滑过渡，多长时间内完成过渡，以什么方法来进行过渡，和延迟多久开始过渡。

示例如下：

.animate{
-webkit-transition:left 0.5s ease-out;
left:500px;
top:500px;
}

有一个比较优秀的动画库，Animate.css ：animate

可以看看别人是怎么构建动画的。