如何使用 CSS 动画从左到右移动元素? [英] How can I use CSS animations to move an element from left to right?

问题描述

我想将图像从左侧动画到右侧.

#pot{位置:绝对；-webkit-animation:线性无限；-webkit-animation-name:运行；-webkit-animation-duration: 5s;}@-webkit-keyframes 运行 {0% { 左: 0%;}100%{ 左 : 100%;}}

<img src = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width = "100px" height="100px">

如何从左侧重新输入图像??

解决方案

试试这个方法.

#pot {位置:相对；溢出:隐藏；}.图片 {动画:运行5s线性无限；}.images img:nth-child(2) {位置:绝对；左:-100%；}@keyframes 运行 {0% {变换:translateX(0);}100% {变换:translateX(100%);}}

<div class="图片"><img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px"><img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">

I want to animate the image from left side to right side.

#pot{

position:absolute;
-webkit-animation:linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}     
@-webkit-keyframes run {
    0% { left:  0%;}
    100%{ left : 100%;}
}

<div id = "pot">
<img src = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>

how can I re-enter the image from left side??

解决方案

Try this way.

#pot {
  position: relative;
  overflow: hidden;
}

.images {
  animation: run 5s linear infinite;
}

.images img:nth-child(2) {
  position: absolute;
  left: -100%;
}

@keyframes run {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

<div id="pot">
  <div class="images">
    <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
    <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
  </div>
</div>

这篇关于如何使用 CSS 动画从左到右移动元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！