二、动画- animation动画

1.动画

动画的定义

动画：
- 动画和过渡类似，都是可以实现一些动态的效果；
- 不同的是过渡需要在某个属性发生变化时才会触发；
- 动画可以自动触发动态效果；
- 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤；

以一个项目来开始了解他

1. 准备工作：当鼠标移入到box1内， box1下的box2进行margin-left位移, 通过过渡动画，让他在2s内缓慢移动。

  
    
    
    
    
    
  
  
    
"box1">
      
"box2">
  
    

• transition 要发生过渡效果，一定是需要属性样式发生变化的时候才执行。且需要用户去触发了某个行为，比如这里的鼠标移动到box1上。
  但是我现在想，一进入页面，动画效果就立即执行，播放动画，不需要用户去触发。这个时候就需要我们的Animation 动画来做。

2. 开始使用animation做动画效果。

• 先在style 里面，设置关键帧动画。需求：让box2从margin-left:0 移动到 margin-left:700px;

   @keyframes test{
         /* from表示动画的开始位置 也可以使用 0% */
        from{
          margin-left: 0;
        }
        /* to动画的结束位置 也可以使用100%*/
        to{
          margin-left:700px;
        }
      }

• 现在我们要让box2生效这个动画，只需要在box2中使用即可。
  注意：要想box2动画生效，要在这里使用，置了名字后，如果没有设置动画执行时间，也是看不到动画效果的。

  .box2 {
      
       background-color: #bfa;
      /* animation-name: 要对当前元素生效的关键帧的名字 */
       animation-name: test;
        /* animation-duration: 动画的执行时间 */
       animation-duration: 2s;

      }

• 此时我们完成的代码如下：

  
    
    
    
    
    
  
  
    
"box1">
      
"box2">
  
    
  

2.动画的属性

 .box2 {
      
       background-color: #bfa;

      /* animation-name: 要对当前元素生效的关键帧的名字 */
       /* animation-name: test; */
       
        /* animation-duration: 动画的执行时间 */
       /* animation-duration: 2s; */
      
       /* 动画延迟1s后才执行 */
       /* animation-delay: 1s; */
       
       /* 动画先加速后减速的运动 */
       /* animation-timing-function: ease-in-out; */
       
       /* 
            animation-iteration-count 动画执行的次数 
                可选值：
                    次数
                    infinite 无限执行
       */
       /* animation-iteration-count: 1; */
       

         /*
             animation-direction
                指定动画运行的方向
                    可选值：
                    normal 默认值  从 from 向 to运行 每次都是这样 
                    reverse 从 to 向 from 运行 每次都是这样 
                    alternate 从 from 向 to运行 重复执行动画时反向执行
                    alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

        */
       /* animation-direction: alternate-reverse; */


       /* 
                animation-play-state: 设置动画的执行状态 
                可选值：
                    running 默认值 动画执行
                    paused 动画暂停
       */
       /* animation-play-state: paused; */


       /* 动画的填充模式
        none:默认值 动画执行完毕元素回到原来的位置
        forwards:动画执行完毕会停止在动画结束的位置
        backwards:动画延时等待时，元素就会处于开始from 的位置，即这里的margin-left=0
        both: 结合了forwards 和backwards
       */
       /* animation-fill-mode: both; */
       

       /* 综上:可以通过一个属性，直接把大家都设置了
  		2s:动画执行的时间
        2：执行两次
        1s：延迟1s执行
        alternate：去的时候是从前往后，然后在从后往前回来
 	   */
       animation:test 2s 2 1s alternate;



      }