Timed sliding text-box

Question

I'm looking for a way to animate my text box so that it slides into frame from the right side at (x) amount of time. So far, I haven't found any online resources that could help me with this animation.

For now, I just have a simple (absolute) box.

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

Note: Not too sure if this will require JavaScript, but I have preexisting functions for elements not involved in my question. If my script is needed, I'm more than happy to update my post.

Thanks in advance for your help!

Answer 1

This can be done with CSS only with animation you can specify a duration as well as a delay (in your case x). Paradoxically to make an element slide from the right it easier to positioned it with the left property. Like so…

 .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

You could animate 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>

In case you're wondering why I'm using translate3d , it triggers hardware acceleration. Check out this article if you're interested .