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 ;)
Ah. Ok. Thanks for the insight. I was just wondering if this was possible with CSS. Looks like we need JavaScript for most of the things. ;)
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 ;)