CSS 动画效果

过渡transition

转载原文：https://www.cnblogs.com/xiaohuochai/p/5347930.html

.el-card {
  span {
    transition: all 1s ease 0s;
  }
}
.el-card:hover {
   span {
     margin-left: 15px;
   }
}

.el-card:hover {
   span {
     animation-name: rightMove;
     animation-duration: 1s;
     animation-fill-mode: forwards;
   }
}

animation

@keyframes rightMove {
  /* from 表示动画的开始位置 也可以使用0% */
  from{
  }

  /* to 表示动画的结束位置 也可以使用100% */
  to{
    margin-left: 15px;
  }
}