[分享]css动画右下角飞到左上角

在CSS动画中，我们经常使用位移来让元素移动。本文将介绍如何创建一个简单的CSS动画，将一个元素从右下角飞到左上角。.box { : fixed; bottom: 0; right: 0; width...

在CSS动画中，我们经常使用位移来让元素移动。本文将介绍如何创建一个简单的CSS动画，将一个元素从右下角飞到左上角。

.box {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: #f00;
  animation: fly 3s ease-in-out forwards;
}

@keyframes fly {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(-100vw + 50px), calc(-100vh + 50px));
  }
} 

首先，我们为元素设置了固定定位，以使其在浏览器窗口中保持固定的位置。然后，我们使用了bottom和right属性来将元素定位到右下角。

接下来，我们定义了一个名为“fly”的动画。该动画由两个关键帧组成。在第一个关键帧中，我们将元素的transform属性设置为translate(0, 0)，即没有任何位移。在第二个关键帧中，我们将元素的transform属性设置为translate(calc(-100vw + 50px), calc(-100vh + 50px))，即将元素移动到距左上角50像素的位置。

最后，我们将动画应用于元素的animation属性中，并设置持续时间为3秒。我们还指定了一个缓动函数，以使动画看起来更加平滑。最后，我们使用forwards关键字来确保元素在动画完成后停留在动画的最后一帧。

这个简单的动画可以为您的网站添加一些乐趣和互动性。您可以根据自己的需要调整元素的起始位置、移动距离和持续时间，以创建更复杂的动画效果。