定时滑动文本框

Question

我正在寻找一种方法来为我的文本框设置动画，以便它在 (x) 时间内从右侧滑入框架。 到目前为止，我还没有找到任何可以帮助我解决这个 animation 的在线资源。

现在，我只有一个简单的（绝对的）盒子。

 .taskbox { width: 230px; padding: 15px; position: absolute; right: 25px; top: 25px; background-color: black; color: white; font-family: courier new; font-size: 20px; }

 <div class="taskbox">Evidently, the pandemic has taken a toll on the economy. You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

注意：不太确定这是否需要 JavaScript，但我有针对我的问题未涉及的元素的预先存在的功能。 如果需要我的脚本，我非常乐意更新我的帖子。

在此先感谢您的帮助！

Answer 1

这可以使用 CSS 完成，仅使用animation您可以指定持续时间和延迟（在您的情况下为 x）。 矛盾的是，使元素从右侧滑动更容易使用left属性定位它。 像这样……

 .taskbox { width: 230px; padding: 15px; left: 100%; position: absolute; top: 25px; background-color: black; color: white; font-family: courier new; font-size: 20px; animation: slide-from-right.4s 2s forwards; /* x = 2s */ } @keyframes slide-from-right { to { left: calc(100% - 230px - 30px - 25px); /* 100% = total width, 230px = element width, 30px = left and right padding, 25px = distance from right border */ } }

 <div class="taskbox">Evidently, the pandemic has taken a toll on the economy. You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

Answer 2

您可以为transform: translate设置动画：

 .taskbox { width: 230px; padding: 15px; position: absolute; right: 25px; top: 25px; background-color: black; color: white; font-family: courier new; font-size: 20px; transform: translate3d(calc(100% + 25px), 0, 0); animation: slide-in 0.5s 1s cubic-bezier(0.3, 1.3, 0.9, 1) forwards; } @keyframes slide-in { to { transform: translate3d(0, 0, 0); } }

 <div class="taskbox">Evidently, the pandemic has taken a toll on the economy. You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

如果您想知道我为什么使用translate3d ，它会触发硬件加速。 如果您有兴趣，请查看这篇文章。