动画设置

 transition:设置过渡

属性值:过渡的属性列如  width  一般设置为all   过渡时间:$s

transfrom:2D变换

transform-origin: center ;

设置变换基准点 可以是单词  px(相对于左上角) 百分比(相对于变换前的自身)

1平移

translate(x,y):一个值默认在x方向,两个值分别代表x方向和y方向

单位px 或百分比(相对于自身宽高)

transform: translate(200px,300px);

 2,缩放

scale(x,y):一个值默认在x方向,两个值分别代表x方向和y方向

单位px 或百分比(相对于自身宽高)

0-1是缩小

大于1是放大

负数,先翻转后缩放

transform: scale(-50,0.1);

3,旋转

rotate:围绕变换基准点转

单位deg

transform: rotate(36deg);

4,倾斜

skewx:向x轴倾斜;

skewy:向y轴倾斜;

skew(x,y):如果只有一个值,作用与skewx相同,如果两个代表向x轴和向y轴倾斜;

单位deg

 

transform-style: preserve-3d;元素3d变换

animation-name: 动画名

animation: bounce .3s 6 alternate ease-out;

ainimation:(动画名  时间  次数(infinite正无穷次)   动画方向  变化速度)

动画方向:

normal正方向

reverse:反方向

alternate:奇数次正方向偶数次反方向

alternate-reverse:奇数次反方向偶数次正方向

设置动画完成时的状态

 backwards动画完成时保持动画刚开始的状态

 forwards动画完成时保持动画结束的状态