| 动态效果：transition,定义在css属性值改变的时候，经过多久渐变过去 |
|
|
|
|
|
|
|
| transition |
property |
duration |
timing-function |
delay |
|
|
|
|
|
|
| transition-property |
none/all | property |
|
|
|
|
|
|
|
|
| transition-duration |
?s |
|
|
|
|
|
|
|
|
|
| transition-timing-function |
linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n) ,n=[0~1] |
|
|
|
| transition-delay |
?s |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 动态效果animation |
|
|
|
|
|
|
|
|
|
|
| animation |
name |
duration |
timing-function |
deley |
iteration-count |
direction |
|
|
|
|
| animation-name |
none | @keyframe规定的动画名称 |
|
|
|
|
|
|
|
| animation-duration |
?s |
|
|
|
|
|
|
|
|
|
| animation-timing-function |
linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n) ,n=[0~1] |
|
|
|
| animation-delay |
?s |
|
|
|
|
|
|
|
|
|
| animation-iteration-count |
infinite | n,取值自然数 |
|
|
|
|
|
|
|
| animation-direction |
normal/alternate,在偶数次数反向播放 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 动画名称@keyframes |
|
|
|
|
|
|
|
|
|
|
| @keyframes xxxname{ |
|
|
|
|
|
|
|
|
|
|
| from {} |
to{} |
|
|
|
|
|
|
|
|
|
| 0%{} |
…%{} |
100%{} |
|
|
|
|
|
|
|
|
| } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| transition和animation区别 |
1. transition真的改变css属性，并且在改变属性的时候产生动画，动画则没有（或许因此动画的效率高？） |
|
|
2. transition相当于只有from和to，且只运行一次，但是to是可以动态改变的； |
|
|
|
|
|
|
|
|
|
|
|
|
| 静态效果：transform |
|
|
|
|
|
|
|
|
|
|
| transform |
none | transfrom-functions; |
|
|
|
|
|
|
|
| matrix(n,n,n,n,n,n) |
matrix3d(n,n,n,n…..*16) |
|
|
|
|
|
|
|
| translate(x,y) |
translate3d(x,y,z) |
translateX(x) |
translateY(y) |
translatez(y) |
沿着x,y,z轴移动x,y,z长度 |
|
|
|
| scale(x,y) |
scale3d(x,y,z) |
scaleX(x) |
scaleY(y) |
scaleZ(z) |
沿着x,y,z轴方向缩放x,y,z比例，取值0~1 |
|
|
| rotate(angle) |
rotate3d(x,y,z,angle) |
rotateX(angle) |
rotateY(angle) |
rotateZ(angle) |
沿着中心旋转，或者沿着x,y,z轴旋转，x,y,z取值0或者1，angle取值0~360deg |
| skew(x,y) |
skewX(x) |
skewY(y) |
沿着X，Y倾斜的角度，取值-90~90deg，如果等于90，则因为太倾斜而消失。 |
|