CSS：过渡动画 (Transition)与关键帧动画(Keyfram)

一、过渡动画 (Transition)

1.简单介绍

Transition能为样式的变化提供过渡效果，例如在下面的代码中：

    .main {
      width: 300px;
      height: 100px;
      background-color: #d26f6f;
    }
    .main:hover {
      width: 300px;
      height: 200px;
      background-color: #5e3e3e;
      transition: all 1s;
    }

div会在鼠标移动到上面后逐渐从高100px变为高200px，而不会瞬间改变，更加丝滑。

2.使用方法

可以将所有属性写在一起，如：

transition: property duration timing-function delay;

也可以将属性分开写，如：

transition-property 指定CSS属性的name，比如说transform，也可以简单的all

transition-duration 动画效果的时间

transition-timing-function  指定transition效果的转速曲线

transition-delay  定义transition效果开始的时候

3.部分支持动画的属性

下面列举了一部分支持过度动画的CSS属性，更详细信息请查阅相关文档。 

opacity（透明度）

transform（变形，包括旋转、缩放、移动和倾斜等）

color（颜色）

background-color（背景颜色）

width 和 height（尺寸大小）

margin、padding、border-width（边距、内填充和边框宽度）

top, right, bottom, left（定位属性，当元素是相对定位、绝对定位或固定定位时）

font-size（字体大小）

outline-color、outline-width（轮廓颜色和宽度）

box-shadow（阴影效果）

background-position（背景图像位置）

border-radius（边框半径）

filter（滤镜效果，如模糊、灰度等）

clip-path（裁剪）

二、关键帧动画(Keyfram)

1.简单介绍

关键帧动画能够设置多个不同时间的不同样式来实现比过渡动画更为复杂的动画。例如在下面的代码中：

   .main {
      width: 300px;
      height: 100px;
      background-color: #67efd4;
      font-size: 16px;
    }
    .main:hover {
      animation: 2s infinite changeDiv;
    }
    @keyframes changeDiv {
      0% {
        width: 300px;
        height: 100px;
        background-color: #67efd4;
      }
      20% {
        width: 30px;
        height: 20px;
        background-color: #5ad344;
      }
      80% {
        width: 300px;
        height: 200px;
        background-color: #b0396f;
      }
      100% {
        width: 30px;
        height: 200px;
        background-color: #acd2a5;
      }
    }

Div会在2s内的不同阶段变成不同点状态，并具有过渡效果。

定义关键帧动画除了百分比，也可以使用from/to

   @keyframes changeDiv {
      from {
        width: 300px;
        height: 100px;
        background-color: #67efd4;
      }
      to {
        width: 30px;
        height: 200px;
        background-color: #acd2a5;
      }
    }

2.使用方法

可以将所有属性写在一起，如：

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

也可以将属性分开写，如：

animation-name  @keyframes 动画的名称

animation-duration  动画完成一个周期所花费时间，

animation-timing-function 动画的速度曲线，

animation-fill-mode 动画不播放时的样式。  

animation-delay 规定动画何时开始。

animation-iteration-count 规定动画被播放的次数。

animation-direction 规定动画是否在下一周期逆向地播放。

animation-play-state  规定动画是否正在运行或暂停。

3.关键帧属性的值