animation-fill-mode的使用

动画分为 初始状态、等待期、动画执行和完成期四个阶段，当清楚这四个阶段便能较好的理解了

• 初始状态：未触发动画效果时的原有状态
• 等待期：设置animation-delay的这段期间
• 动画执行：delay 结束瞬间开始执行动画，一直持续到最后一帧
• 完成期：执行完最后一帧时，元素此时处于的状态

animation-fill-mode有四个可选值

• none：表示等待期和完成期元素样式都为初始状态样式，不受动画定义（@keyframes）的影响
• forwards：表示等待期样式为第一帧样式，完成期保持最后一帧样式
• backward：表示等待期为第一帧样式，完成期跳转为初始样式
• both：表示等待期保持初始样式，完成期保持最后一帧样式

	animation-fill-mode: none;
	animation-fill-mode: forwards;
	animation-fill-mode: backwards;
	animation-fill-mode: both;
    animation-fill-mode: both, forwards;
	animation-fill-mode: none, backwards;

MDN