CSS，我如何才能使这个图像动画不回来，而是去周围的页面？

2wnc66cl 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(104)

这是我第一次在css上做动画，我想做一个类似的效果www.example.com上的fishao.com，云如何移动，超越页面，然后他们返回，我的动画去到页面的末尾，然后回来，它不像在一个过渡，idk如何解释，请帮助。（编码3周）

body {
  background-color: aliceblue;
}

img {
  position: relative;
  top: 80px;
  left: 100vh;
  height: 10%;
  width: 11%;
  animation: Cloudanim 50s linear infinite forwards;
}

@keyframes Cloudanim {
  0% {
    left: 100vh;
  }
  25% {
    left: 50vh;
  }
  50% {
    left: 0vh;
  }
  75% {
    left: 165vh;
  }
  100% {
    left: 100vh;
  }
}

<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Cartoon_cloud.svg">

css

来源：https://stackoverflow.com/questions/76538637/css-how-can-i-make-this-image-animation-not-come-back-and-instead-go-over-and-a

1条答案

按热度按时间

apeeds0o1#

要创建连续动画，图像在页面上来回移动而不会突然返回，您可以按如下方式修改CSS和动画关键帧：

img {
  position: absolute; /* Change from 'relative' to 'absolute' */
  top: 80px;
  left: -10%; /* Start the image outside the left edge of the page */
  height: 10%;
  width: 11%;
  animation: Cloudanim 50s linear infinite; /* Remove 'forwards' property */
}

@keyframes Cloudanim {
  0% {
    transform: translateX(-10%); /* Use 'transform' instead of 'left' */
  }
  25% {
    transform: translateX(40%); /* Adjust the distances as needed */
  }
  50% {
    transform: translateX(90%);
  }
  75% {
    transform: translateX(140%);
  }
  100% {
    transform: translateX(190%); /* Adjust the distance to complete the loop */
  }
}

- 更确切地说：**

1.将图像的位置更改为绝对位置，以便它可以在页面中自由移动。
1.调整初始左侧值，将图像放置在页面左边缘之外（-10%）。
1.从动画中删除forward属性，使其能够平滑地重复而不反转。
1.不对left属性设置动画，而是将transform属性与translateX（）一起使用以水平移动图像。这提供了更好的性能并避免了布局重新计算。
1.调整translateX（）值中的距离以控制图像的移动。正值将图像向右移动，负值将图像向左移动。

赞(0）回复(0）举报 2023-06-25

我来回答

CSS，我如何才能使这个图像动画不回来，而是去周围的页面？

1条答案

相关问题

热门标签

最新问答