CSS of transition&&animation&&transfrom

transition 状态过渡

transition-property  监听哪个属性的状态改变，默认all

transition-duration 过渡时间

transition-timing-function 过渡状态  linear

transition-delay  等待执行时间

一般直接整合填写  （display属性不能被监测）

 

cubic-bezier 贝塞尔曲线（运动状态）transition-timing-function的属性值

cubic-bezier(x1,y1,x2,y2),x轴必须在0~1

 

animation 动画

transition只能实现一个状态改变的动画，animation可以多次改变状态,通过"，"可以指定多种动画

animation-dalay

animation-duration

animation-timing-function 通过cubic--bezier设置的函数设置的是每段状态的变化

steps()直接跳转 

(1,end/start)一步到位 ===step-end/start

(2,end/start)每个状态跳两次

end:保留当前状态直到动画结束（差一步） 后面可填写forwards弥补下缺陷（补上一步）

start:保留下一个状态直到动画结束（类似抢跑）

animation-iteration-count 动画循环执行次数（默认1）:infinite(无限循环)

animation-direction:reverse（倒着走）/alternate(正着一次反着一次，前提：count=2+)/alternate-reverse 动画方向

animation-play-state:paused暂停/running运行 设置动画状态

animation-fill-mode:none/forwards(设置动画结束后的状态，一直以运动最后状态显示)/backwards(设置动画开始之前的状态)/both（设置开始之前和结束之后的状态）

 

@keyframe animation-name{

0%/from{}

~（中间只能用百分数,每个阶段之间没有逗号）

100%.to{}

}

使用: selector{

animation : animation-name animation-duration animation-timing-function animation-dalay , animation-name2 animation-duration2 animation-timing-function2 animation-dalay2，。。。。

}

 

transform 变化（底层是通过矩阵计算）

 

transform-origin 设置中心点

 

rotate(deg度数)         旋转  2D

元素旋转后，参照的轴也会转动

rotateX（deg）  沿着X轴旋转

rotateY（deg）  沿着Y轴旋转

rotateZ（deg）  沿着Z轴旋转

rotate3d（x,y,z,angle）沿着矢量值为轴旋转

 

scale（x,y） 小于1就缩小   伸缩变化2D

1.伸缩的是元素变化坐标轴的刻度（如果是(2,1)视觉上横向的100会变成200，实际还是100）

2.可叠加使用 

3. 伸缩后会保留影响     

scalex()

scaley()

scalez()

scale3d()  （三者之和）

 

skew 倾斜

skew(xdeg,ydeg)  2D变化   坐标轴倾斜，对后面平移等操作也有影响，同时刻度被拉伸。

 

translate 平移        也会影响坐标轴

translatex()   自身不确定宽高，需要设置Left/top可以用left/top: 50%;translatex/y(-50%)

translatey()

translatez() 比较特别，配合prespective有投影效果

translate3d()

 

prespective: none/1~正无穷  景深

在父级加prespective: ~px ; （三D视角）

transform-style :preserve-3d  直接父级设置，子级保持3D空间

prespective-origin 视觉中心

可叠加