Geek Answers Handbook

Can I use a CSS3 transition to animate a metric tag value?

Is it possible if css only animates the visual meter change / progress marker if the value has changed?

Something like that

-webkit-transition: all 1s linear;

or

 -webkit-transition: meter-value 1s linear;
+4
source share
3 answers

No, CSS is intended only to change the presentation of the page, while the value is part of the content of the page and must be specified either directly in HTML or using JavaScript.

Edit: I misunderstood your question a bit, but the answer remains the same. CSS transitions are only for animating CSS properties, and it is not possible to access an element's value from CSS.

+3
source

Yes, this is possible because WebKit uses the Shadow DOM to materialize the counter element instead of using the default system (so that you can configure the metric progress bar). You can define this as hidden content inside a counter element:

 <div pseudo="-webkit-meter-inner-element"> <div pseudo="-webkit-meter-bar"> <div pseudo="-webkit-meter-optimum-value" style="width: 46%;"></div> </div> </div>

When you change the value of your counter, WebKit will change the width of the last div. So:

 meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { transition: 1s width; }

You can animate your counter.

+6
source

No, this is not possible because this property is not supported as a transition-property . Proof: w3.org

+2
source

More articles:


All Articles