今天笔记简单记录被问到的问题，基本不怎么写css动效的我被问到动画css的各个方法属性的，我懵的，甚至记不太起来具体属性名。今天就简单回顾记录下笔记：
1. animation-name：动画名称。
2.animation-duration : 动画持续时长。
3.animation-iteration-count：动画运行次数。
4.animation-direction：动画运行方向。
5.animation-play-state：动画运行或者暂停。
6.animation-delay:动画延时生效。
7.@keyframes 动画定义，后面是动画的名称。
8.animation-fill-mode : none | forwards | backwards | both; 在动作结束时保持该状态不变的解决办法：
（1）none：不改变默认行为。
（2）forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
（3）backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
（4）both：向前和向后填充模式都被应用。
以上这个几个是我们常用的几个属性方法。
来下面贴下简单的代码：
效果如下：
效果图：
好了如果要他拉伸后暂停，保持拉伸后的状态呢？接下来 我们进行改造：
效果图：（这里的gif 图是重复播放的 具体可以自己代码实操）
再然后，如果我们要从最左边固定，往右边拉伸呢？（这个问题面试的时候笔试问到。）
因为我们之前用flex 布局，使得div样式剧中，所以它拉伸的时候展示就是两边延伸。所以我们把flex去掉试试？结果还真的是。其实这个也是我当时没反应过来的问题。
就先写到这记录下我的薄弱环节。后面有问题再一一记录。
