CSS3动画

前言

css3动画的提出，取代了许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

---

兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。

@keyframes 规则

@keyframes与动画名称连接，并规定好动画的时长等其余属性，从而设置了动画名称的元素便能进行动画效果的显示。

animation

属性名称	属性描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

animation-timing-function 速度曲线

• linear:线性过度。
• ease:平滑过度。
• ease-in:由慢到快。
• ease-out:由快到慢。
• ease-in-out:由慢到快又变慢。

animation-iteration-count 设置动画循环次数

infinite（无限循环） | <number>;

animation-direction 设置动画的方向

• normal：正常方向；
• reverse：反方向运行；
• alternate：动画现正常运行在反方向运行，并持续交替运行；
• alternate-reverse：动画先反运行再正方向运行，并持续交替运行。
  后两种需要animation-iteration-count设置为infinite；也就是循环。若没有，后两种则失去作用。

css3过渡与动画个人案例——弹入窗口

css3过渡与动画个人案例——弹入窗口

轮播图的实现

待更新~