CSS3 动画

1、使用动画：2步
1、创建动画
创建关键帧：当前元素的几个关键状态，当设置好关键帧后，动画就可以将几个关键帧连起来播放，并且使用过度的效果
语法：@keyframes 动画名称{
0%{
css属性名:css属性值;
...
}
50%{
css属性名:css属性值;
...
}
100%{
css属性名:css属性值;
...
}
}

2、调用动画：谁需要给谁使用
1、animation-name:动画名称;
2、animation-duration: 完成动画需要的时间;
3、animation-direction: normal(从前向后)/reverse(从后向前)/alternate(轮流播放); -- 动画播放顺序
4、animation-iteration-count: 具体次数/infinite(无限大);
5、animation-fill-mode: forwards;//动画结束后停在最后一帧，如果没有这句话，会回到第0帧
6、animate-play-state: paused 或 running;

7、简写：animation: name duration direction iteration-count fill-mode play-state linear(匀速运动);
注意：以上六句话不用记忆，但是简写一定要会
顺序无所谓