css基本动画都在这啦……
新增属性过渡：transition
transition: 变化的属性 花费时间 运动曲线 何时开始（花费时间和何时开始后必须跟秒s单位，后两个可以省略）
谁要变给谁加transition属性
如果有多个属性要变化，写all即可（也可用逗号分隔）
2D转换之移动translate:
transform: translate（x,y）
transform: translateX（n）
transform: translateY（n）
沿着x轴和y轴移动；不会影响到其他盒子的位置; 对行内元素不会起作用
transform: translate（50%,50%）如果里面填百分数，则移动的是该盒子的50%（本身盒子的）
2D转换之旋转 rotate:
transform: rotate（45deg）
为正时顺时针，为负时逆时针
默认旋转的中心点是中心
转换中心点：transform-origin: x y;（参数x和y中间用空格隔开；默认的是transform-origin: 50% 50%；可以给x y设置像素或方位名词 top bottom left right center）
2D转换之缩放scale
transform: scale（x.y）;
x y中间用逗号隔开，不跟单位，表示的是倍数
transform: scale（2,2）=transform: scale （2）宽和高同时放大2倍，默认中心点是中心
transform: scale（0.5,0.5）宽和高同时缩小0.5倍
相较于设置width和height的属性值，scale的最大优势在于：放大或缩小时不影响其他盒子的位置，和移动translate一样；还可以设置中心点的位置，用transform-origin: x y
2D转换综合写法：
格式为 transform: translate（）rotate（）scale（）...属性间用空格隔开
当同时有移动translate和其他属性时，先要把移动写前面，再写其他的
3D动画基本使用
定义动画：@keyframes move
调用动画：在要动的标签样式里写动画名称 animation-name: move和持续时间 animation-duration
0%和100%（动画序列）可以换成 from和to
可以做多个状态的变化：添加多个动画序列
综合写法：animation: （前两个属性必须写）
速度曲线：
默认值是ease （低速―加快―低速）
linear 匀速
step（）步长，分几步来完成
3D移动translateZ：
往外为正值，往里是负值
translateZ（）单位跟px
简写的方法：transform: translate3d（x,y,z） （x y z值是不能省略的，如果没有就写0）
透视固定时，Z越大（正值）看到的物体越大
透视perspective:
近大远小perspective（400px）<（200px）
透视写在被观察元素的父盒子上面
3D旋转rotate3d:
transform: rotateX（）
transform: rotateY（）
transform: rotateZ（）
transform: rotate3d（x,y,z,deg）
3D呈现transfrom-style:
transfrom-style: preserve-3d（默认值是 flat 不开启3d空间）
代码写给父级，子元素开启立体空间
网友评论