怎么玩转css动画？（整理分享）

本篇 文章 给大家带来关于css中动画的相关知识，其中包括什么是动画，动画的调用以及多关键帧动画 应该 怎样 实现，希望对你有帮助。

1. 什么是动画

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

大致结构：

@keyframes rotation { /* rotation 动画名 */
     From  {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate( 360  deg );
    }}

2. 动画的调用

定义动画之后，可以使用 animation 属性调用动画。

animation基本属性：

name: 动画的名字
(初始默认值 none) duration: 动画时长
(初始默认值 0s) timing function：变化速度曲线
(初始默认值 ease) delay: 延迟时间（动画经过多少时间才 开始 ）
(初始默认值 0s) IT eration-count: 动画执行次数
(初始默认值 1，如果想动画 永远 执行，写 infinite)

animation:  name | duration | timing function | delay | iteration-count;

除此之外，还有一些属性：

animation-direction(设置 是否 轮流反向播放动画)

normal: 以 正常 的方式播放动画（初始默认值） rev erse: 以相反的方式播放动画 alternate: 让动画的第 2、4、6…(偶数次)自动逆向执行 alternate-reverse: 让动画的 奇数 次自动逆向执行

animation-fill-mode(设置当动画不播放时动画的状态)

none: 不 改变 动画的默认行为 forwa rds : 让动画停止在最后结束状态 backwards: 在 animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式 both: 同时遵循 forwards 和 backwards 的规则

animation- play - stat e(设置动画是播放还是 暂停 )

paused: 暂停动画的播放 running: 正常播放动画

3.  多关键帧动画

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

大致结构：

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

（学习视频分享：css视频教程）

以上就是怎么玩转css动画？（整理分享）的详细内容，更多请关注其它相关文章！

总结

以上是 为你收集整理的 怎么玩转css动画？（整理分享） 全部内容，希望文章能够帮你解决 怎么玩转css动画？（整理分享） 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于怎么玩转css动画？（整理分享）的详细内容...