如何使用 CSS 動畫將元素從左向右移動？

Question

我想從左側到右側為圖像設置動畫。

 #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>

如何從左側重新輸入圖像？

Answer 1

試試這個方法。

 #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>

Answer 2

使用翻譯來獲得通用解決方案

 #pot { overflow:hidden; } #pot img{ position: relative; animation: run 2s linear infinite; } @keyframes run { 0% { left: 0%; transform: translateX(-100%) } 100% { left: 100%; } }

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

Answer 3

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

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