CSS3之动画得使用

动画得基本使用

动画可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。

动画与过渡的区别：

1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多

用一个动画的基本步骤：
3. 通过@keyframes指定动画序列
4. 通过百分比或者from/to将动画分割成多个节点
5. 在各个节点中分别定义样式
6. 通过animation将动画应用于相应的元素

   div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        /* 使用动画
           animation 动画名称 动画时间 动画次数
           infinite 无限循环*/
        animation: myanim 2s infinite;
    }

    /* 1. 声明动画
        @keyframes 动画名称 */
    @keyframes myanim {
        from {
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
        }
        to {
            width: 300px;
            height: 300px;
            transform: rotate(300deg);
        }
    }

动画得八大参数

animation是一个复合属性，一共有8个参数

1. animation-name:动画名称，由@keyframes定义的

   animation-name: play
   

2. animation-duration：动画的持续时间

   animation-duration: 3s;
   

3. animation-timing-function：动画的过渡类型

     linear
     ease(默认值)
     steps(10)
     动画效果transition的类似
     animation-timing-function: steps(10);
   

4. animation-delay：动画的延迟时间

    animation-delay: 2s;
   

5. animation-iteration-count：动画的循环次数 infinite

     /*    特殊值: infinite 无限次 */
     animation-iteration-count: infinite;
   

6. animation-direction：设置动画在循环中是否反向运动

      /*    normal 默认正常, 从 from 到 to
           alternate 从 from 到 to, 再从 to 到 from
     */
     animation-direction: normal;
     animation-direction: alternate;
   

7. animation-fill-mode：设置动画时间之外的状态

    /*    forwards 停留在最终状态 */
      animation-fill-mode: forwards; 
   

8. animattion-play-state:设置动画的状态。

     /* 8. 动态状态
          paused 表示让当前动态停止 */
      animation-play-state: paused;
   

动画合写顺序没有要求，但是延时要放在动画时间后面
例如：

/* 动画合写: 顺序没有要求, 只是延时要放在动画时间后面 */
      /*animation: 动画名称 动画时间 动画次数 动画方向 动画效果 */
      animation: play 2s infinite alternate linear;

动画函数库

https://daneden.github.io/animate.css/
使用库中的动画：

方法1：
正常的方式使用

 div {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      /* 使用动画 */
      /*animation: flash 2s infinite;*/
    }

方法2：

该动画库可以通过添加类名来使用动画函数库
1. animated 添加动画时间， 让动画停留在最终状态
2. 添加动画类, 指定具体动画的名称

<div class="animated bounceInUp"></div>