CSS关键帧动画
1、@keyframes 设定动画规则。
2、animation 所有动画属性的简写属性，用于设置六个动画属性：
animation-name/animation-duration/animation-timing-function/animation-delay/
animation-iteration-count/animation-direction
3、animation-name 属性为@keyframes 动画规则名称。若设置为none则覆盖已有的动画效果。
4、animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是0。
5、animation-timing-function 规定动画的速度曲线。默认是“ease”。
(1) linear规定以相同速度开始至结束的过度效果（等于cubic-bezier(0,0,1,1)）。
(2) ease 规定慢速开始，然后变快，然后慢速结束的动画效果。（等于cubic-bezier(0.25,0.1,0.25,1)）
(3) ease-in 规定以慢速度开始的过度效果。（等于cubic-bezier(0.42,0,1,1)）
(4) ease-out 规定以慢速度结束的过度效果。（等于cubic-bezier(0,0,0.5,1)）
(5) ease-in-out 规定以慢速度开始和结束的过渡效果。（等于cubic-bezier(0.42,0,0.58,1)）
(6) cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。
6、animation-delay 规定动画何时开始。默认是0。
7、animation-iteration-count 规定动画被播放的次数。默认是1。infinite为无限次数播放。
8、animation-direction 规定动画是否在下一周期逆向播放。默认是“normal顺序播放”。/alternate动画应该轮流反向播放。
9、animation-play-state 规定动画是否在运行或暂停。默认是“running规定动画正在播放。”/paused规定动画暂停。
10、animation-fill-mode 规定对象动画时间之外的状态。
(1) none 不改变默认行为。
(2) forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
(3) backwards 在animation-delay 所指的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
(4) both 向前和向后填充模式都被应用。
案例：
#div1{
width: 150px;
height: 150px;
background: aqua;
border: #996633 3px double;
/*设置动画的名称和事件*/
animation-name: mydh;
animation-duration: 3s;
animation-timing-function:linear; /*规定动画的速度曲线*/
animation-delay:1s;/*规定动画何时开始。默认是0。*/
animation-iteration-count:3;/*规定动画被播放的次数。默认是1。infinite为无限次数播放。*/
animation-direction:alternate; /*规定动画是否在下一周期逆向播放。默认是“normal顺序播放”。/alternate动画应该轮流反向播放。*/
animation-fill-mode:forwards;/*规定对象动画时间之外的状态。*/
}
#div2{
margin-top: 30px;
width: 150px;
height: 150px;
background: yellow;
border: green 3px double;
/*复合属性*/
animation: mydh 8s ease 0s 4 alternate;
}
/*设置动画起始位置*/
@keyframes mydh{
/*第一种动画方式*/
/* from{
margin-left: 20px;
background: yellow;
}
to{
margin-left: 800px;
background: yellowgreen;
} */
/*第二种动画方式*/
0%{
margin-left: 20px;
background: yellow;
}
50%{
margin-left: 300px;
background: orange;
}
100%{
margin-left: 800px;
background: yellowgreen;
}
}
实例：图片翻转
*{
margin: 0;
padding: 0;
}
img{
width:100%;
height: 100%;
}
div{
width: 300px;
height: 450px;
margin-left: auto;
margin-right: auto;
border: 3px aqua double;
/*添加动画*/
animation: fz 12s infinite;
}
body{perspective: 500px;/*子元素会获得透视效果*/}
@keyframes fz{
0%{transform: rotateY(45deg);}
20%{transform: rotateY(180deg);}
40%{transform: rotateY(360deg);}
60%{transform: rotateX(45deg);}
80%{transform: rotateX(180deg);}
90%{transform: rotateX(360deg);}
100%{transform: rotateX(360deg);}
}
