Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css selection pseudo-element animation

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.
like image 988
vsync Avatar asked Mar 16 '13 23:03

vsync


2 Answers

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.

like image 153
vsync Avatar answered Nov 16 '22 16:11

vsync


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?

like image 3
vol7ron Avatar answered Nov 16 '22 16:11

vol7ron