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中文网其他相关文章!