如何快速掌握动画的调用及多关键帧动画的实现-群英

上一篇：CSS盒子模型学习中的要点是哪些下一篇：在CSS中正则表达式的用法是怎样，怎么应用

这篇文章主要介绍“如何快速掌握动画的调用及多关键帧动画的实现”，有一些人在如何快速掌握动画的调用及多关键帧动画的实现的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

1. 什么是动画

在 CSS 中，可以使用@keyframes来定义动画
（keyframes 表示“关键帧”）

大致结构：

@keyframes rotation { /* 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 | timing function | 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. 多关键帧动画

对于想要实现多种效果的动画，这个时候就可以使用多关键帧。

大致结构：

@keyframes changeColor {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}}

以上就是关于“如何快速掌握动画的调用及多关键帧动画的实现”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。