HTML就是一款易于开发者开发网站的语言，也是便于小白学习和使用的。
废话不多说！~~
开始今天的内容，HTML动画制作
今天我们要使用的“@keyframes” 规则以及 animation复合属性！


第一个属性：
animation-name用于定义要应用的动画名词，会被@keyframes规则引用
它的值：animation-name：keyframes | none;

第二个属性：
animation-duration用于定义整个动画效果完成的所需时间

它的值：animation-duration：time;

第三个属性：
animation-timing-function用于定义动画的速度曲线。

它的值：animation-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
-------------以上值的意思----------
linear：属性值描述动画从头到尾的速度是相同的
ease：默认属性值。动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier(n,n,n,n)：在cubic-bezier函数中自己的值。可能的值是从0到1的数值

第四个属性：
animation-delay用于定义执行动画效果延迟的时间
animation-delay：time;

第五个属性：
animation-iteration-count用于定义动画的播放次数
animation-iteration-count：number | infinite;
number：数字;
infinite：无限循环

第六个属性：
animation-direction定义当前动画播放方向，即动画播放完成后是否逆向交替循环
animation-direction：normal | alternate;
normal：默认值
alternate：在奇数运动时正常播放，在偶数时逆向播放。

animation复合属性：
animation：它的值是第一个属性到第六个属性的属性值。

接下来简单的画个图

逐渐的换色，黄变红，红边黄。