我想从左侧到右侧为图像设置动画。
#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 = "/image/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>
如何从左侧重新输入图像?
最佳答案
试试这个方法。
#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="/image/qgNyF.png?s=328&g=1" width="100px" height="100px">
<img src="/image/qgNyF.png?s=328&g=1" width="100px" height="100px">
</div>
</div>
关于html - 如何使用 CSS 动画从左到右移动元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65549238/