transition与keyframes配合hover形成动画的区别

前言

并没有多高深的见解，本篇只是单纯的复习动画效果。

keyframes可以用于动画效果

对于keyframes，我们可以简单设定每个关键帧的具体状态，从而使得hover能够触发一些动画。

比如，我们对position为absolute、left为的div设定这样一个动画：

@keyframes move-right {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

如果div有颜色的话，那这个动画效果就像是让div飞过去了一样。当然如果速度慢一点就是飘过去的。

但是，如果并不是那么巧，我们所设定的left如果只有，那么div就会停在一半。

这个时候，如果把鼠标移出来，就会出现一个很尴尬的场景：

div直接闪回了。那是因为鼠标移出后，hover事件立即就结束了，对应的animation设置也就直接结束了，div恢复到的状态。

这可并不美观。

transition用于补足上述缺陷

这个时候，transition就来了，它可以通过设定

div {
  transition: all 1s ease-out;
}

这样就表示，无论是什么情况，只要某个事件触发了div的某种属性的改变，那么就会用的时间、逐渐变慢的改变速度，来实现这样一个动画效果。同时，按照同样的时间与速度缓慢恢复到原来的状态。

需要注意的是，transition需要放在div下，而不是div:hover下。

当然，transition也并不是完美的。比如，linear-gradient这类就没有办法。

并不是说transition没有办法做到，而是说，linear-gradient本身就不是个好惹的家伙。因为他实际上是图片，所以定了就是定了。