animation（动画）和 Transition（过渡）

• animation（动画）动画结束之后元素的属性没有变化
• Transition（过渡）动画结束之后元素的属性会变化
• transform 元素进行旋转、缩放、移动或倾斜（与动画无关）
• translate 元素移动（transform的一个属性值）

1、animation（动画）用法

1. 动画关键帧（@keyframes）

/* 定义名为"move-right"的关键帧动画 */
@keyframes move-right {
  /* 初始状态（0%）：元素位于左侧 */
  0% {
    transform: translateX(0);
  }
  
  /* 结束状态（100%）：元素移动到右侧 */
  100% {
    transform: translateX(100px);
  }
}

2. 应用动画（animation）

/* 选择器 .animated-element 应用刚才定义的"move-right"动画 */
.animated-element {
  animation-name: move-right;
  animation-duration: 2s;
}

3、动画属性

animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

4、简写

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

5、多阶段动画

/* 定义名为"multi-stage"的多阶段动画 */
@keyframes multi-stage {
  0%, 50% { background-color: red; } 
  50%, 100% { background-color: blue; } 
  30%, 70% { color: green; }
}
​
.multi-stage-element {
  animation: multi-stage 2s linear infinite; 
}

2、transition（过渡）用法

1、用法

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}

2、属性

1. transition-property	规定应用过渡的属性。
2. transition-duration	规定过渡效果的持续时间。
3. transition-timing-function	规定过渡效果的速度曲线。
4. transition-delay	规定过渡效果何时开始。
5、transition 简写

3、CSS 2D 转换（transform）

• translateX() translateX(50px) -> X轴偏移50px

• translateY() translateY(50px) -> Y轴偏移50px

• translate() translate(50px, 100px) -> X轴、Y轴偏移量

• scaleX() scaleX(2) -> 宽*2

• scaleY() scaleY(3) -> 高*3

• scale() scale(2, 3) -> 宽2，高3

• skewX() skewX(30deg) -> X轴倾斜30度

• skewY() skewY(30deg) -> Y轴倾斜30度

• skew() skew(30deg, 30deg) -> X轴倾斜30度，Y轴倾斜30度

• rotate() rotate(45deg) -> 顺时针旋转45度

• matrix() matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())