Keyframe animation Issue

[codeispoetry]

currently, it is coming as:

themes
themesplugins

**anticipated behavior **

themes
plugins

If I make this empty:

<span class="ccthemplug">themes</span>

like this:

<span class="ccthemplug"></span>

then it is ok, but is it safe?

I mean when animation fails for any reason there should be some fall back text. isn’t it?

I think keyframes not compatible in very old browsers.

[PaulOB]

Some browsers won’t animate the content property and so it gets ignored and you could end up with no text in some browsers. (Your demo isn’t working in IE or edge)

I’m always loathe to add actual content via the content property and you would be better off putting the content into the html first and then do your tricks with it.

e.g.

That also works in IE/Edge and has content in the html for screen readers etc.

In your original you could possibly hide the text via the keyframes but this is very hacky as position is not an animatable property and should be ignored but chrome applies the rule and allows for the original text to be hidden.

IE doesn’t animate the content property and doesn’t animate the position property so you just get the original text. However if at some time the content property is animatable in IE then the method will break. Therefore I only show it as an example.

The first demo should be safe almost everywhere but is a little more complicated.