分享笔记

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空间）

代码写给父级，子元素开启立体空间