![从左]( "从左")
本文介绍了如何使用 CSS 动画从左到右移动元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将图像从左侧动画到右侧.
#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 动画从左到右移动元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！