Is it possible to use CSS3 transition to animate the value of a meter-tag?

Is it possible with css only to animate the visual change to a met开发者_运维技巧er / progress-tag if the value changed?

Somthing like this

-webkit-transition: all 1s linear;

Or

-webkit-transition: meter-value 1s linear;

---

Yes it is perfectly possible, because WebKit uses Shadow DOM to materialize the meter element instead of using default system one (so the meter ans progress bar can be styled). You can figure this as an hidden content inside the meter 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 meter, WebKit will change the width of the last div. So with :

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

You can animate your meter.

---

No, CSS is meant only to change the presentation of a page, while the value is part of the page's content, and must be specified either directly in HTML or manipulated via JavaScript.

Edit: I slightly misunderstood your question, but the answer remains the same. CSS transitions are meant to animate CSS properties only, and it isn't possible to access an element's value from CSS.

---

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