逐帧动画

今天学习了HTML动画的制作，以下是今天的笔记以及部分练习

制作动画主要分为两部分，第一是制作关键帧，第二是调用关键帧，如下笔记所示
1：制作关键帧
@keyframes 动画名称{
/开始/
from{left:0;}
/结束/
to{left:500px;}
}
@keyframes 动画名称{
0%{}
//中间可以添加任意关键帧
20%{}
50%{}
70%{ }
100%{}
}
2: 调用关键帧：
简写方式：名称 持续时间 延迟时间 类型
animation: name duration timing-function delay iteration-count direction fill-mode;（复合样式）
animation:
（1）设置动画的名字 (自定义的):animation-name
（2）动画的持续时间:animation-duration
（3）动画的延迟时间:animation-delay
（4）动画的类型：step-start:马上跳到动画每一结束桢的状态
linear：线性过渡。
ease：平滑过渡。
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
（5）动画的重复次数:animation-iteration-count :
number: 循环的次数
infinite：无限循环
（6）动画运动的方向:normal：正常方向
: reverse：反方向运行
: alternate：动画先正常运行再反方向运行，并持 续交替运行
: alternate-reverse：动画先反运行再正方向运行，并持续交替运行
（7） 运动的状态： animation-plat-state : running paused(暂停)
（8）动画停止的状态: animation-fill-mode:forwards (停在最后一帧);

逐帧动画制作案例：
代码：

效果

注：图片显示只是其中一部分案例