Looping rotating text

HTML & CSS
1

Hi there,

I am using this example on CodePen which works fine, but I would like the text to go through in an infinite loop.

This is the example:

Is this possible with this example?

Thanks

2

I would question whether or not it is desirable.

Note

Animation should almost always be user controlled or very short in duration. Images that continually animate can cause the rest of the page to be more difficult, or for users with very high levels of distractibility, totally inaccessible.

WCAG 2 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user. Common failures include carousels or sliders that automatically animate or cycle through content.

https://webaim.org/techniques/images/

4 Likes
4

To create key frames that loop continuously you can use the infinite value.

animation-iteration-count: infinite;

Add that to all your keyframes and they will keep going infinitely.

You should probably put it inside a prefers reduced motion media query to save it annoying people.

2 Likes
5

Thanks for that.

I have added it to the keyframe, but it still seems to stop at the end.

This is what I now have:

@keyframes rotate {
 0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
     animation-iteration-count: infinite;
  }
  
	50%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
}

@keyframes rotate-last {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
      animation-iteration-count: infinite;
  }
  
	50%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
}
6

Hi,

It doesn’t go in the key frame it goes in the normal css wherever you have used the animation property.

There are several properties in different rules animated so you need to add it to each one.

Sorry I can’t give full code as on holiday with only a mobile to type on :slight_smile:

Look at how it’s specified in the link I showed previously.

2 Likes
7

Ah, I see, thanks :slight_smile: I will have a play around and see if I can work it out :slight_smile:

Have a great holiday!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.