html5和css3新特性之动画
此处总结动画及私有前缀。
（一）动画
动画需要先定义，再调用。
1.定义动画
1）连续动画的定义
@keyframes 动画名字 {
from {
//动画开始之前的状态
}
to {
//动画结局的状态
}
}
2）分步多状态动画的定义
@keyframes 动画名字 {
0% {
开始状态
}
50%{
中间状态
}
100% {
结束状态
}
}
2.调用动画
语法 => animation: 动画名称 动画时长 其他属性值；
谁用动画就给谁加调用。动画名称及动画时长必须有，其他属性值随意且顺序也随意。
动画属性
将上表做一个分析解释：
动画的名字 animation-name: dh；
动画的时间 animation-duration: 5s；
动画速度曲线（匀速或其他） animation-timing-function: linear匀速； 默认ease表示缓冲；steps（5）按步分5次走
动画延迟多久后执行 animation-delat: 3s； 默认为0s
动画播放次数 animation-iteration-count: 2； 无限次为infinite
动画是否逆向播放 animation-direction: alternate； 默认normal
动画暂停 animation-play-state: paused； 默认running运动
动画结束后的状态 animation-fill-mode: forwards保持当前状态；backwords回到起始状态
代码举栗：
<!-- 3D自动轮播图，鼠标放上的时候暂停轮播 -->
<style>
body {
/* 设置透视 */
perspective: 600px;
}
/* 用父盒子包裹3D立方体 */
.box {
width: 700px;
height: 300px;
margin: 100px auto;
position: relative;
transform-origin: center;
transform-style: preserve-3d;
/* 动画名为dh，总时长5s，无限次匀速播放 */
animation: dh 5s infinite linear;
}
.box img {
width: 700px;
}
.lb {
position: absolute;
}
.lb:nth-child(1) {
/* 沿Z方向的位移设置成轮播图图片width的一半 */
transform: rotateY(90deg) translateZ(350px);
}
.lb:nth-child(2) {
transform: rotateY(-90deg) translateZ(350px);
}
.lb:nth-child(3) {
transform: rotateY(0deg) translateZ(350px);
}
.lb:nth-child(4) {
transform: rotateY(180deg) translateZ(350px);
}
@keyframes dh {
from {
transform: translateZ(-400px) rotateY(0deg);
}
to {
transform: translateZ(-400px) rotateY(360deg);
}
}
.box:hover {
/* 鼠标经过时暂停动画 */
animation-play-state: paused;
}
</style>
<body>
<div class="box">
<div class="lb">
<img src="images/lb1.png" alt="">
</div>
<div class="lb">
<img src="images/lb2.png" alt="">
</div>
<div class="lb">
<img src="images/lb3.png" alt="">
</div>
<div class="lb">
<img src="images/lb4.png" alt="">
</div>
</div>
</body>
效果截图
敲了一下午的代码，动画还是掌握的不是很好。冲鸭！继续敲～
（二）私有前缀
浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。 因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。
代码举栗：
.box{
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
/*推荐使用 先前缀后标准 顺序*/
再比如，在使用背景颜色渐变的属性时，也要加前缀：
-webkit-background: linear-gradient(top, red, pink);
