CSS Transition & Animation & Transfrom

过渡（transition）

CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。它可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transition 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化

过渡相关属性：

transition-property 指定过渡效果中的样式属性名称，默认值：all（所有属性）
transition-duration 属性以秒( s )或毫秒( ms )为单位，用于指定过渡动画所需的时间，默认值：0s
transition-timing-function 用于定义过渡效果的时序计算函数
关键字：
- ease：默认值，元素样式从初始状态过渡到终止状态时速由快到慢。
- linear：元素样式从初始状态过渡到终止状态时速是匀速。
- ease-in：元素样式从初始状态过渡到终止状态时速由慢到快。
- ease-out：元素样式从初始状态过渡到终止状态时速由快到慢。
- ease-in-out：元素样式从初始状态过渡到终止状态时，先加速再减速。
函数：
- steps()：将整个过渡过程划分成相同大小的间隔，每个间隔是相等的
- cubic-bezier()：贝塞尔曲线函数
transition-delay 单位s或ms，用于指定过渡效果开始的延迟时间，默认值：0s

过渡简写属性：

语法：

transition: <property> <duration> <delay> <timing-function>, +
/*
<property> 过渡中应用的CSS属性名
<duration> 过渡动画所需的时间 <-
<delay> 过渡效果开始的延迟时间 ->
<timing-function> 过渡效果的时序计算函数
*/

例：

<style>
  .box{
      width: 200px;
      height: 200px;
      background: lightcoral;
      transition: width 2s, height 2s, background 1s; /* 同时设置3个属性的过渡时长 */
  }
  .box:hover{
      width: 400px;
      height: 400px;
      background-color: bisque;
  }
</style>
<div class="box"></div>

触发过渡

过渡效果必须在指定元素的指定属性值发生变化时才会产生（从原值到过渡值），因此需要通过一些行为来触发过渡（如：点击、鼠标移入等），可以通过CSS伪类选择器来触发过渡，或是通过 js 的事件来触发过渡

通常要产生过渡效果，还要满足从原值到过渡值之间必须能产生一个发生变化的中间值

动画（animation）

CSS animation 可以将从一组 CSS 样式过渡到另一组 CSS 样式。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

动画的使用需要先定义动画序列

使用 @keyframes(关键帧) 来定义动画序列：

@keyframes 动画名称 {
	0%{
		/* 样式声明 */
	}
	100%{
		/* 样式声明 */
	}
}

@keyframes 规则中包含多个关键帧(子声明块)，每个关键帧都以一个百分比值(%)开头，其后跟一个样式声明块
百分比值是指在指定时间中的时间点，动画(animation)会将指定的样式从一个时间点过渡到另一个时间点
关键帧还可以以2个关键字开头：form(等同于0%)、to(等同于100%)

使用动画：

<style>
@keyframes animate{
  from{
    width: 200px;
    height: 200px;
  }
  to{
    width: 400px;
    height: 400px;
  }
}
.box{
  width: 200px;
  height: 200px;
  background: lightcoral;
  animation-name: animate;
  animation-duration: 2s;
}
</style>
<div class="box"></div>

动画相关属性：

animation-name 执行动画的名称与@keyframes 之后的名称相同。该属性必须指定
animation-duration 动画执行的时间，同 transition-duration，默认值为0s。该属性必须指定
animation-delay 动画执行的延迟时间，同 transition-delay，默认值为0s
animation-timing-function 同 transition-timing-function
animation-iteration-count 动画执行次数，默认值为1
- 数值
- infinite 无限循环播放动画
animation-direction 动画执行的方向，默认值为normal(动画从前往后播放)
- reverse 反向播放动画，即从后往前播放动画
- alternate 交替反向播放动画，在重复执行动画时，动画会从前往后播放，结束时在从结束点交替反向播放
- alternate-reverse 反向交替播放动画，在重复执行动画时，动画会从后往前播放，结束时在从结束点交替反向播放
animation-play-state 动画执行的状态
- running 运行
- paused 暂停
animation-fill-mode 动画执行结束的目标样式，默认值为none（动画执行结束时，其样式会还原动画执行前的样式）
- forwards 动画执行结束时，其目标样式为最后一个关键帧中的样式
- backwards 动画执行结束时，其目标样式为第一个关键帧中的样式

动画的简写属性：

1	animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <play-state> <fill-mode>, +

变形（transform）

CSS transform 属性可以在不影响文档流( normal flow )的情况下改变作用内容的位置。通过 transform 属性可以实现包括旋转，倾斜，缩放以及位移等，这些变形同时适用于平面与三维空间。

语法：

1	transform: transform-list;

transform-list：

translate() 平移，相对于自身位置移动

语法：

translate(tX, tY); /* tX 为水平移动，tY垂直移动，值可以为任何长度值 */
translateX(tX); /* 设置水平移动 */
translateY(tY); /* 设置垂直移动 */
translateZ(tZ); /* 设置Z轴移动 */
translate3d(tX, tY, tZ); /* 同时设置x, y, z轴的移动 */

translates

scale() 缩放

语法：

scale(sX, sY); /* sX 为水平缩放，sY 为垂直缩放，值为数字值(缩放倍数) */
scaleX(sX); /* 设置水平缩放 */
scaleY(sY); /* 设置垂直缩放 */
scaleZ(sZ); /* 设置Z轴缩放 */
scale3d(sX, sY, sZ); /* 同时设置x, y, z轴的缩放 */

scales

rotate() 旋转

语法：

rotate(aZ); /* aZ 为Z轴旋转度数，如45deg */
rotateX(aX); /* 设置水平旋转 */
rotateY(aY); /* 设置垂直旋转 */
rotateZ(aZ); /* 设置Z轴旋转 */
rotate3d(aX, aY, aZ); /* 同时设置x, y, z轴的旋转 */

rotates

skew() 斜切

语法：

skew(aX, aY); /* aX 为水平方向的扭曲角度，aY 为垂直方向的扭曲角度 */
skewX(tX); /* 设置水平扭曲 */
skewY(tY); /* 设置垂直扭曲 */
skewZ(tZ); /* 设置Z轴扭曲 */
skew3d(tX, tY, tZ); /* 同时设置x, y, z轴的扭曲 */

skews