CSS3动画
2019-10-06 本文已影响0人
Nice先生的狂想曲
前言
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过渡与动画个人案例——弹入窗口
轮播图的实现
待更新~
