Keyframe animation Issue

currently, it is coming as:


**anticipated behavior **


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.

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.


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.

1 Like

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