Why doesn't the animation
property works on ::selection
selector in CSS?
@keyframes frames{
50%{ color:red }
}
@-webkit-keyframes frames{
50%{ color:red }
}
::selection { background:#EEE; animation:0.4s frames infinite; }
::-moz-selection { background:#EEE; animation:0.4s frames infinite; }
::-webkit-selection{ background:#EEE; -webkit-animation:0.4s frames infinite; }
<h2>Selected text should be animated:</h2>
CSS3 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 along the way.
I wrote Tab Atkins and he answers:
In general, most browsers have trouble running animations on pseudo-elements. We're gradually fixing these issues, but it's slow work, because pseudo-elements are pretty complicated to handle in the browser.
On top of that, the ::selection pseudo-element is the most complicated pseudo-element in all of CSS. It's so complicated, we explicitly undefined it in our specs until we figure out how to actually specify it in a way that works well.
Most of what I see on animation is:
Applies To: all elements, ::before and ::after pseudo-elements
Which suggests not other pseudo-elements or states?
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