如何玩转css动画
如何玩转css动画
本篇内容介绍了“如何玩转css动画”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
1. 什么是动画
在 CSS 中，可以使用@keyframes来定义动画
（keyframes 表示“关键帧”）
大致结构：
@keyframesrotation{/*rotation动画名*/from{/*起始状态*/transform:rotate(0);}to{/*结束状态*/transform:rotate(360deg);}}
2. 动画的调用
定义动画之后，可以使用 animation 属性调用动画。
animation基本属性：
name: 动画的名字
(初始默认值 none)duration: 动画时长
(初始默认值 0s)timing function：变化速度曲线
(初始默认值 ease)delay: 延迟时间（动画经过多少时间才开始）
(初始默认值 0s)iteration-count: 动画执行次数
(初始默认值 1，如果想动画永远执行，写 infinite)
animation:name|duration|timingfunction|delay|iteration-count;
除此之外，还有一些属性：
animation-direction(设置是否轮流反向播放动画)
normal: 以正常的方式播放动画（初始默认值）
reverse: 以相反的方式播放动画
alternate: 让动画的第 2、4、6…(偶数次)自动逆向执行
alternate-reverse: 让动画的奇数次自动逆向执行
animation-fill-mode(设置当动画不播放时动画的状态)
none: 不改变动画的默认行为
forwards: 让动画停止在最后结束状态
backwards: 在 animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式
both: 同时遵循 forwards 和 backwards 的规则
animation-play-state(设置动画是播放还是暂停)
paused: 暂停动画的播放
running: 正常播放动画
3. 多关键帧动画
对于想要实现多种效果的动画，这个时候就可以使用多关键帧。
大致结构：
@keyframeschangeColor{0%{background-color:red;}20%{background-color:orange;}40%{background-color:blue;}100%{background-color:green;}}
“如何玩转css动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站，小编将为大家输出更多高质量的实用文章！
