本来以为，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动画
网友评论