CSS | 过渡和动画

1 transition 过渡

值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡

常见的支持过渡的属性：color、shallow、width/height、%、 z-index 、 opacity 、 transform

属性	值
transition-property 哪个属性需要过渡	none 不过渡；all 所有能过渡的属性具体属性名 transition-property:width, height
transition-duration 过渡持续时间	s/ms 值，默认 0 列表 列表值分别代表每个属性持续不同的时间，只写一个值则对所有属性生效
transition-delay 过渡延迟	s/ms 值
transition-timing-function 过渡速度曲线	同 animation-timing-function ease、linear、ease-in、step...
transition	transition: 1s 1s linear all; 仅一个时间则表示 duration ；两个则是 duration+delay ；其他值无顺序要求

/* 需要过渡的 css 属性、变化时间、过渡曲线、延迟 */
div {
    transition: transform 0.5s linear 1s;
}
/* 移动 50 像素并放大 1.2 倍 */
div:hover {
    transform: translate(50px, 50px) scale(1.2);
}

2 animation 动画

2.1 动画定义

step1 定义关键帧

/* 第一步：定义关键帧（定义动画）*/
/*简写*/
@keyframes 动画名 {
  from {
    /*property1:value1*/
    /*property2:value2*/
  }
  to {
    /*property1:value1*/
  }
}

/* 完整写法 */
@keyframes 动画名 {
  0% {
  	/*property1:value1*/
  }
  20% {
  	/*property1:value1*/
  }
  40% {
   	/*property1:value1*/
  }
  60% {
  	/*property1:value1*/
  }
  80% {
  	/*property1:value1*/
  }
  100% {
  	/*property1:value1*/
  }
}

step2 应用动画

1. animation-name 给元素指定具体的的 @keyframes 动画名称
2. animation-duration 设置动画所需时间，m/ms，默认 0
3. animation-delay 设置动画延迟 m/ms，默认 0

/* 第二步：给元素应用动画 */
.box {
  /* 指定关键帧(动画) */
  animation-name: testKey;
  /* 设置动画所需时间 */
  animation-duration: 5s;
  /* 设置动画延迟 */
  animation-delay: 0.5s;
}

2.2 其他动画属性

属性	值
animation-timing-function 动画速度曲线	ease（默认）平滑动画 linear 线性过渡 ease-in 慢 → 快；ease-out 快 → 慢 ease-in-out 慢 → 快 → 慢 steps(integer,end/start) 步进函数，一参为步数，二参为每步的过渡方式: start / end（默认） steps(1, end) 即 step-start:1 和 step-end:1 cubic-bezie(number,number,number,number) 特定的贝塞尔曲线类型
animation-iteration-count 动画的播放次数	...: 2 动画循环次数 ...: infinite 无限循环
animation-direction 动画方向	normal 正常方向 (默认) reverse 反方向运行 alternate 先正常再反方向，并持续交替运行 alternate-reverse 先反再正方向，并持续交替运行
animation-fill-mode 动画之外的状态	forwards动画播放前，元素将立即应用动画的第一帧的样式 backwards动画结束后，元素将保持动画最后一帧的样式状态 none 默认； both 结合 forwards 和 backwards
animation-play-state 播放状态	running 运动 (默认) paused 暂停
animation	只设置一个时间表示 duration ，设置两个时间分别是 duration 和 delay ，其他属性没有数量和顺序要求 animation-play-state 一般单独使用 例animation: 动画（关键帧）名 3s 0.5s linear 2 alternate-reverse forwards

3 transform 变换

3.1 2D 变换

属性	值
translateX translateY translate	设置水平、垂直位移，需指定长度值； 指定%，则参考自身宽度/高度 同时设置水平/垂直，指定顺序：水平 垂直
scaleX scaleY scale	设置水平方向、垂直的缩放比例 1 表示不缩放，大于 1 放大，小于 1 缩小同时设置
rotate	设置旋转角度值( deg )，正值顺时针，负值逆时针。
2D扭曲（略）
多重变换链式写法	transform: translate(-50%, -50%) rotate(45deg) 建议旋转写最后
原点变化 transform-origin	👇

【位移】

1. 位移与相对定位很相似，都不脱离文档流，不影响其它元素
2. 相对定位的百分比值参考的是其父元素；定位的百分比值，参考的是其自身
3. 与定位相比，浏览器处理位移的效率更高
4. transform 不支持 inline 元素
5. 位移配合定位，可实现元素水平垂直居中 ---> 14.1
6. 借助缩放，可实现小于 12px 的文字
7. 一般配合 transition 过渡使用

【原点变换】

1. transform-origin 可以设置变换的原点（默认元素的中心）
2. 修改变换原点对位移没有影响， 对旋转和缩放会产生影响
3. 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%

/* 变换原点在元素的中心位置—— 默认值 */
transform-origin: 50% 50%;  
/* 变换原点在元素的左上角 */
transform-origin: left top; 
/* 变换原点距离元素左上角 50px 50px 的位置 */
transform-origin: 50px 50px;  
 /* 只写一个值的时候，第二个值默认为 50% */
transform-origin: 0; 

13.2 3D 变化

父元素 必须开启 3D 空间！

1、 定义 3D 空间

属性	值
transform-style 父元素开启 3D 空间	flat（默认）让子元素位于此元素的二维平面内（ 2D 空间） preserve-3d 让子元素位于此元素的三维空间内（ 3D 空间）
perspective 景深（透视）	none（默认） 不指定透视 长度值 观察者到 z=0 平面的距离（景深），不允许负值	设置给父元素
perspective-origin 透视点位置	perspective-origin: 400px 300px;	即观察者位置，默认在元素中心通常不需要调整透视点位置

2、3D 变化

属性	值
translateZ z 轴位移	正值向屏幕外，负值向屏幕里 不能写百分比
translate3d(x, y, z)	3 个参数对应 x,y,z 轴上的移动距离，均不能省略 transform: translate3d(50px, 100px, 200px)
rotateX x 轴旋转角度	角度值( deg ) transform: rotateX(45deg) 面对 x 轴正方向：正值顺时针，负值逆时针
rotateY y 轴旋转角度	角度值( deg ) 面对 y 轴正方向：正值顺时针，负值逆时针
rotate3d(x, y, z,deg)	transform: rotate3d(1,1,0,30deg) 沿 xy 轴转 30 度 前 3 个参数分别表示 x , y , z ，1 表示该轴上需要旋转 第 4 个参数表示旋转的角度，参数不允许省略
scaleZ z 轴方向的缩放比例	1 表示不缩放，＞ 1 放大，＜ 1 缩小
scale3d(x, y, z)	3 个参数对应 x,y,z 轴上的缩放比例；均不能省略 transform: scale3d(1, 1.5, 2)
backface-visibility 背部可见性	visible（默认）指定元素背面可见，允许显示正面的镜像 hidden 指定元素背面不可见 需要加在发生 3D 变换元素的自身上

div {
  /* ...... */
  perspective: 1000px;
  transform: rotateX(30deg) translateZ(100px);
}