Text changing animation

HTML-CSS
1

Hey, any idea why this animation isn’t working for me and how to fix it?

https://codepen.io/TuscannyCodes/pen/jOyNbEb

I think it may have something to do with the div container but im not sure.

Any help is greatly appreciated. Thanks :pray:

2

The animation is working. You currently have it set to change from “Inhale” to “Exhale” every 2 seconds. What exactly do you expect it to do?

1 Like
3

I don’t see it working at all… I see it being stuck on inhale, the default content setting.

4

Definitely working on my end. Maybe a setting in your browser. Try to view it in a different browser. :man_shrugging:

Edit: Maybe try adding the browser prefixes.

content: "Inhale";
	-webkit-animation-name: animate;
	        animation-name: animate;
	-webkit-animation-duration: 4s;
	        animation-duration: 4s; 
	-webkit-animation-iteration-count: infinite; 
	        animation-iteration-count: infinite;
1 Like
6

Ok yeah seems to be working fine in google chrome but not safari, even with the prefixes at the moment . Thanks for your help. Would really like to get it working on all browsers.

7

So apparently animating content is only supported in Chrome. If you want it to work in other browsers, you’ll have to use another method.
https://css-tricks.com/animating-the-content-property/

In my own testing animating content has only worked in stable desktop Chrome (v46 at time of writing). No support anywhere else. No Safari on desktop or iOS. No Firefox. No IE. Each of these browsers will ignore the animation, showing only the original content in the pseudo element.

1 Like
8

VERY interesting! Thanks! yeah I figured it must be something of this nature that was causing it not to work, especially after adding the -webkit- prefixes! Thats a shame really. I wonder how something like this could even be an issue???

Nevertheless, I guess I will be looking for a different solution. Possibly going with a different animation altogether. I wonder if something like this could be done completely in javascript (even though im unaware of any keyframe-like properties in JS).

Hmm :face_with_monocle:, something for me to think about. THANKS AGAIN! :+1:

10

Thanks for the help. Your website looks great by the way! :pray: :+1:

And yeah, it was totally a browser issue. I got it working fine now.

11

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