本来以为,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动画