Css animation tool

https://codepen.io/ayeshariyaz/pen/RwWebVB?editors=1100

Hello, I have done a quick CSS animation typography. Now I want the animation to run backward too. So the animation begins from ‘H’ of Hello World and then it should again start from ‘D’ all the way to ‘H’. And this should run on a loop.
Your help will be highly appreciated.

It’s a simple fix, you can use the animation-direction: alternate so it goes back and forth and remove the linear.ex:

element {
  animation: animation 5s alternate infinite;
1 Like

Thanks, but it didn’t work.

Greetings @ayesha,

Have you considered JavaScript for animations?

Hi, @Queryeleison, nope. Is this not possible in pure CSS?

It must be possible! But if you’re into more complex animations, you may want to have a look at GSAP. You can use it for free on CodePen and you could achieve a reverse motion with a simple animation.reverse();

1 Like

It is quite a hard one to do, because you used animation-delays on all of them. Here’s an example of what my solution can do.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction

Thanks, I did check this, but ya I guess the animation-delay is making it hard to reverse the animation.

Oh, okay. I will check that out.