CSS动画

一、transition过渡

• transition: 属性名 | 时长 | 过渡方式 | 延迟
  指定第一个数字默认指定为时长，第二个数字默认才是延迟时间;

  transition: left 200ms linear

  可以用逗号分隔两个不同属性;

  transition: left 200ms , top 400ms

  可以用all代表所有的属性;

  transition:all 200ms

• 常用的过渡方式
  linear 线性：动画会以恒定的速度从初始状态过渡到结束状态
  ease缓动：动画开始时逐步加速，中间逐渐减慢，结束时逐步加速
  ease-in-out：动画开始时缓慢，中间逐步加速，结束时逐渐减慢

• 使用方法
  配合transform使用，transform常用功能：

  1. translate : 位移 translateX;translateY;translateZ;
  2. scale : 缩放 scale(1.5);
  3. rotate : 旋转 rotateX;rotateY;rotateZ;默认为Z轴，单位为deg;
  4. skew : 倾斜 skewX;skewY;
  5. perspective : 为 3D 转换元素定义透视视图。

  注意：

• 并不是所有属性都能进行过渡
  -display:none ==> block无法过渡, 显示和消失是无法过渡的
  一般改成 visibility:hidden ==> visibile

• 过渡必须要有起始
  一般只有一次动画，或者两次
  比如 hover 和非 hover 状态的过渡

二、transition过渡

• 使用方法：声明关键帧；添加动画

1. 声明关键帧

@keyframes 动画名 {
 from {
   transform: translateX(0%);
 }

 to {
   transform: translateX(100%);
 }
}

@keyframes 动画名 {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

2. 添加动画
   animation：动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 |