[分享]css动画播放完成后慢慢回去

在网页设计中，CSS动画已经成为了不可或缺的一部分。不仅能够增强用户体验，还能够让页面内容更为生动、鲜活。然而，我们是否曾经遇到这样一种场景：CSS动画播放完成后，一下子就消失了，没有任何回归的过程？...

在网页设计中，CSS动画已经成为了不可或缺的一部分。不仅能够增强用户体验，还能够让页面内容更为生动、鲜活。然而，我们是否曾经遇到这样一种场景：CSS动画播放完成后，一下子就消失了，没有任何回归的过程？这样的体验是否让人有些突兀呢？在这里，提供一种CSS动画在播放完成后，慢慢回去的技术方案。

各位网页开发者都应该知道，CSS动画的播放可以借助于Keyframes规则和Animation属性来实现。而这里需要用到的是animation-timing-function属性，它可以控制动画播放的缓动方式，如 ease、linear 等。因此，我们利用这个属性，可以为CSS动画增添一个播放完成后的慢慢回去的过程。

.example {
  animation: example 2s ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes example {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
.example.done {
  animation: example-bounce 1s ease-out;
}
@keyframes example-bounce {
  50% {
    transform: translateX(90%);
  }
  75% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
} 

以上代码中的.example为动画元素的选择器，使用了translateX()的位移变换方式。在.animation的属性值中，我们明确了播放的时间为2秒，且使用缓动方式为ease-in-out。而animation-fill-mode属性则表示动画完成后的状态，这里我们设为forwards，表示动画完成后 onmousedown 之前元素保持动画的最后一帧状态。

而在.animation.done中的代码，则通过调用keyframes动画 ——example-bounce来使得元素回到自己隐匿掉的位置。这里的ease-out则表示“回弹”的变换方式，而animation时间设置为1秒，则是为了使得回弹过程不那么生硬，也更加适配用户体验。

通过这个技术方案，可以使得CSS动画播放完成后的回归效果更加自然、流畅。不过，需要注意的是，为了保证兼容性和体验友好度，需要对不同的浏览器进行适配、测试。