hover一个div另一个div移动

使用animation

<style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    .d1{
      background: yellow;
      width: 300px;
      height: 200px;
      position: relative;
      left: 300px;
    }
    .d2{
      background: pink;
      width: 300px;
      height: 200px;
      position: absolute;
      left: 0;
      top: 0;
      visibility: hidden;
    }
    .d1:hover+.d2{
      visibility: visible;
      animation: run 1s ease-out;
    }
    @keyframes run{
      from{
        left: 0;
      }
      to{
        left: 300px;
      }
    }
  </style>
  <div class="d1"></div>
  <div class="d2"></div>

若结构是兄弟节点，则通过+的方式选择兄弟节点
若结构是父子节点，直接通过空格+选择器的形式实现

 <style type="text/css">
    .d1:hover .d2{
      visibility: visible;
      animation: run 1s ease-out;
    }
    @keyframes run{
      from{
        left: -300px;
      }
      to{
        left: 0;
      }
    }
  </style>
  <div class="d1">
    <div class="d2"></div>
  </div>

另外使用动画animation时，语法规则是
animation: name duration timing-function delay iteration-count direction;

@keyframes run{
      from{ left:0;}
      to{ left: 200px;}
    }

或者利用百分比

@keyframes run{
      0%{ left:0;}
      50%{ left: 200px;}
      100%{ left: 0px;}
    }

使用transition

<style>
.d2{
      background: pink;
      width: 300px;
      height: 200px;
      position: absolute;
      left: 0;
      top: 0;
      visibility: hidden;
      transition: left 2s;
    }
    .d1:hover+.d2{
      visibility: visible;
      left: 300px;
    }
</style>

总结一下animation和transition
1.如果要灵活定制每个帧，则使用animation
2.如果简单的使用from to设置动画，用transition
3.如果要使用js设置动画属性，用transition