Menu
Is it possible with css only to animate the visual change to a meter / progress-tag if the value changed?
Somthing like this
-webkit-transition: all 1s linear;
Or
-webkit-transition: meter-value 1s linear;
666
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
To make the transition occur, you must specify at least two things — the name of the CSS property to which you want to apply the transition effect using the transition-property CSS property, and the duration of the transition effect (greater than 0) using the transition-duration CSS property.
CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements. It's easy to confuse CSS transitions and animations because they let you do similar things. Here are just a few examples: You can visualize property changes.
The transition effect will start when the specified CSS property (width) changes value. Now, let us specify a new value for the width property when a user mouses over the <div> element:
When I wrote this, meter / progress elements were webkit-only. 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.
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
Is it possible with css only to animate the visual change to a meter / progress-tag if the value changed? 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).
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.
71
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
