Animating the `content` Property

来源:互联网 时间:1970-01-01

Did you know that you can animate the contentproperty of pseudo elements? According the list of animatable propertiesin the spec, you shouldn't be able to, but in the latest version of desktop Chrome you can.The demo below should animate from "A" to "B" by changing the contentproperty inside a @keyframesanimation:

See the Pen Animating the content attributeby Robin Rendle ( @robinrendle) on CodePen.

The code

To make a letter-switching demo like above, we make an empty <div>that we’ll fill with the contentof its pseudo element, like so:

<div class="letter-changer"></div>

And then we set the contentof its pseudo element to change as we might any other CSS property, by making a new @keyframesanimation and setting it up with the animationproperty:

@keyframes changeLetter { 0% { content: "A"; } 50% { color: white; } 100% { content: "B"; }}.letter-changer::after { animation: changeLetter 3s linear infinite alternate;} Could this be useful?

The fact that it doesn't work in most browsers and is non-standard makes it a bit risky to use. But there is that whole paving-cowpaths thing (i.e. if it's clearly useful it couldbe standardized).

Ina post last week I described a method for incrementing the numbers inside a loading bar. It used this very concept to increment the numbers. Here's another example in that vein: a countdown!

See the Pen Tick tick boom!by Robin Rendle ( @robinrendle) on CodePen.

Browser support

In my own testing animating contenthas onlyworked 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 contentin the pseudo element.

It might be a handy trick in some distant future orit might never be supported by anything. Non-standard features are always at least at some risk of being deprecated, so this Chrome support may not last forever.

If you need to change content in a cross-browser friendly way

Use JavaScript.