CSS 中的左右移動:通用解決方案
這個問題尋求一個純CSS 動畫來在左側之間水平移動div。其容器的右邊緣。使用簡單左值的挑戰是,當從右向左移動時,元素會暫時消失。
為了克服這個問題,提供的答案建議利用與左或右組合的變換。這消除了對固定值的需求:
<code class="css">@keyframes destraSinistra { 0% { left: 0; } 100% { left: 100%; transform:translateX(-100%); } }</code>
透過使用以下CSS 將此動畫應用於div:
<code class="css">#div1 { position: absolute; border: solid 1px lightgray; width: 100px; height: 30px; background-color: lightgreen; animation: destraSinistra 1s linear infinite alternate }</code>
div 在容器邊緣之間水平移動,保持它在整個動畫中的可見性。該解決方案是通用的,可以應用於任何具有絕對定位的 div,無論其寬度如何。
以上是以下是一些基於問題的標題,它們抓住了文章的精髓: 簡短而直接: * 如何在 CSS 中製作平滑水平移動的動畫而不消失元素? * CSS 動畫:Ac的詳細內容。更多資訊請關注PHP中文網其他相關文章!