css selection pseudo-element animation
css, css-animations
Solution
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.
Problem
Why doesn't the `animation` property works on `::selection` selector in CSS? Basic Test Case: ``` @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. ```