![[滑稽]](/public/face/f25.png)
HTML就是一款易于开发者开发网站的语言，也是便于小白学习和使用的。
废话不多说！~~
开始今天的内容，HTML动画制作
今天我们要使用的“@keyframes” 规则以及 animation复合属性！
![[吐舌]](/public/face/f03.png)
![[玫瑰]](/public/face/f36.png)
第一个属性：
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：它的值是第一个属性到第六个属性的属性值。
接下来简单的画个图
逐渐的换色，黄变红，红边黄。
举报 0