简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果（面试题）

简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果

方法一:使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置

HTML部分
  <div class="box1"></div>
  <div class="box2"></div>
  <style>
      *{margin:0;padding:0}
      div{
          float: left;
      }
      .box1{
          width: 200px;
          height:200px;
          background-color: red;
      }
      .box2{
          width: 100px;
          height:100px;
          background-color: green;
          transition: all linear 1s;
      }
      .box1:hover+.box2{
          transform: translateX(-100px);
      }
  </style>

方法二：使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实

  HTML部分
  <div class="box1"></div>
  <div class="box2"></div>
  <style>
       *{margin:0;padding:0}
       div{
           float: left;
       }
       .box1{
           width: 200px;
           height:200px;
           background-color: red;
       }
       .box2{
           width: 100px;
           height:100px;
           background-color: green;
           animation: mover linear 1s;
       }
       @keyframes mover{
           0%{
               transform: translateX(0px);
           }
           100%{
               transform: translateX(-100px);
           }
       }
  </style>

方法三：复杂方法，可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动

HTML部分
 <div class="box1"></div>
  <div class="box2"></div>
  <script>
  	//获取元素
      //设置x和y的值
      //绑定鼠标移入事件==缓慢移动  x的位置进行移动  自减
      //绑定鼠标移出事件==缓慢移动  x的位置进行移动  自增
  </script>
  <style>
      *{margin:0;padding:0}
      div{float:left}
      .box1{width:300px;height:300px;background-color:red}
      .box2{width:100px;height:100px;background-color:green}
  </style>