定時滑動文本框

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 ，它會觸發硬件加速。 如果您有興趣，請查看這篇文章。