怎么玩转css动画？

百变鹏仔 4周前 (09-20) #CSS

文章标签玩转

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

1. 什么是动画

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

大致结构：

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

2. 动画的调用

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

立即学习“前端免费学习笔记（深入）”；

animation基本属性：

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

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

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

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

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

3. 多关键帧动画

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

大致结构：

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

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

文章推荐

怎么玩转css动画？

1. 什么是动画

2. 动画的调用

3. 多关键帧动画

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写