How do you trigger a CSS animation when the text content changes?
I want to trigger a CSS3 animation whenever the text content of an element changes. I know this is extremely easy to achieve using JavaScript. I was wondering if it can done using pure CSS3.
Detecting whether content changes is still a Javascript thing, because CSS can't detect content changes via a pseudoclass or something like that.
CSS doesn't interact with the DOM that way, it's just for applying styles on elements. If the browser detects changes in the DOM, it will reapply the CSS where necessary, but the CSS doesn't 'know' that the DOM (and it's contents) has changed.
So you need Javascript to detect this and you could then either directly insert CSS via .css() or add a class and do the animation from there, but you probably knew that already ;)
Robert van der Elst
Front End Designer
Detecting whether content changes is still a Javascript thing, because CSS can't detect content changes via a pseudoclass or something like that.
CSS doesn't interact with the DOM that way, it's just for applying styles on elements. If the browser detects changes in the DOM, it will reapply the CSS where necessary, but the CSS doesn't 'know' that the DOM (and it's contents) has changed.
So you need Javascript to detect this and you could then either directly insert CSS via .css() or add a class and do the animation from there, but you probably knew that already ;)