学习css3动画--笔记

本来以为，css3动画嘛，用的时候呢查查API撸出来就好，但是面试的时候被吊打了。。(PS:自己找借口罢了...但是确实被吊打了)想了想，还是好好看看吧。。

如题，这里只是笔记。
css3的动画，也就是animate属性，是一个简写形式，其组成为：

  animation-name: keyframes 

可设置值为none或者一个指定的@keyframes函数。

aimation-duration: 6s

这个属性是这是动画循环所需要的时间。值为正数或者0，再加s或者ms

animation-timing-function:linear

这个属性设置动画的时间。值比较多：
linear动画以恒定速度从头到尾移动。
ease动画开始缓慢，急剧加速，然后逐渐减速。
ease-in动画开始缓慢，然后逐渐加速到结束，同时停止。
ease-in-out动画开始缓慢，加速，然后减速。
ease-out动画突然开始，然后逐渐减速刀结束。
step-start动画立即跳转到最终状态，直到结束。
step-end动画保持初始状态直至结束，此时直接跳转到最终状态。
这几个是可以直接使用的值，另外还可以自己设定，使用steps和cubic-bezier函数来设定自己想要的速度和形式。
steps(5,end)。cubic-bezier(0.6,0.0,0.55,1.0)
还有一个是frames，这个貌似现在还不可用，因为没有敲定，浏览器暂不支持。

---

animation-delay: 3s

动画的延迟。值为数字+ms或者s。可以是负数，默认为0.

animation-interation-count: 2

动画的循环播放次数，设置为数字，或者infinite。

animation-fill-mode:both

动画执行前后动画应用的值。值为
none动画未执行时，不会展示任何样式
both动画遵循向前和向后，在两个方向上扩展动画属性
forwards动画保留执行器遇到最后一个关键帧的预算值。最后一个关键帧取决于
animation-direction和animation-iteration-count
backwards动画将在应用于目标时立即应用第一个animation-delay，并在此期间保存留.animation-delay影响。第一个关键帧取决于animation-direction

animation-direction:normal

动画是否再运行过程中交替方向或者重置起点并重复自身。值为
normal循环过程中，每次都重新播放。这个是默认值
reverse每次循环播放，动画将重置为结束状态，并重新开始。且，反转定时功能。
alternate动画再循环过程中反转方向，第一次迭代向前
alternate-reverse动画再循环过程中反转方向，第一次迭代向后

---

animation-play-state:running

设置动画是否正在运行或者暂停,属性值为
running动画正在播放
paused动画正在暂停

多的一批，不好记啊。多玩玩吧

至此，笔记结束，后续更新学习小动画。
第一个，假装是打字效果的css3动画