CSS编写简单动画

                                         CSS编写简单动画

开发工具与关键技术：@keyframes规则

作者：廖亚星

撰写时间：2019年1月16日

最初涉及CSS的时候，因为不会JavaScript，所以做出来的东西都是古板而没有特效的。
在CSS中，就有一个规则可以让我们自己编写一些简单的动画，这就是@keyframes规则。
以下举例为边框颜色进行变色：
首先我们在CSS中做一个简单的边框
HTML部分↓

CSS部分↓


@keyframes部分↓
图内的animation是一个复合属性，作用为调用编写的动画及控制动画
四个值分别是：动画名称 动画时间 播放方式 无限次数
在0%，20%，40%，60%，80%，100的节点上，分别设置了不同的边框颜色，这样动画在启用后，每个时间段就会变化成不同的颜色，最后设置无限播放次数，这样边框颜色就可以一直循环变化。
0%边框颜色变化

20%边框颜色变化

40%边框颜色变化

60%边框颜色变化

80%边框颜色变化

100%边框颜色变化

作者：执笔诉情思
来源：优快云
原文：https://blog.youkuaiyun.com/weixin_44540681/article/details/86533815
版权声明：本文为博主原创文章，转载请附上博文链接！