css3动画写法:
animation属性:name规定名称
duration花费时间
timing-function速度曲线:linear均速,ease 低快低,ease-in低开始,ease-out低结束,ease-in-out低开低完
delay动画开始前延迟几秒
iteration-count 播放次数: n次数设置,infinite无限次
direction是否轮流反向播放
animation-fill-mode : forwards
animation-fill-mode 这个是用来设置播放完后的位置状态:
none | 不改变默认行为。 |
forwards | 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。 |
backwards | 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。 |
both | 向前和向后填充模式都被应用。 |
二次动画的写法:
可以定义两个动画事件。 不过第二个就又开始从原位置开始了。暂时用不上。
主要就是百分比的动画写法,百分比可以划分次数,只要时间总量和百分比写的没问题,基本没问题了。
这里可以写很多动画方式
translate(50px,100px); 移动,任意方向都行。
transform: rotate(30deg); 以自己为中心旋转,参数是度数。
transform: scale(2,3); 大小变换,后面的参数是倍数。
几个重要属性:
transform-origin: x-axis y-axis z-axis
https://www.zhangxinxu.com/wordpress/tag/perspective/