Can I animate text selection color in CSS3?

Question

I have been trying to, but does not seem to be working.

::selection {
    background-color: #ffb7b7;
    animation-name: example;
    animation-duration: 4s;
}

::-moz-selection {
    background-color: #ffb7b7;
    animation-name: example;
    animation-duration: 4s;
}

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

MDN lists background-color as animatable, but selection being a pseudo-selector might mess things up.

I could bring in a JavaScript animation library but not sure which.

What am I doing wrong? Is it possible in pure CSS (Chrome and FF are the main targets), if not than what JS workaround should I use?

Answer 1

According to MDN docs on ::selection, it allows only a small subset of CSS properties:

• color
• background-color
• cursor
• caret-color
• outline
• text-decoration
• text-emphasis-color
• text-shadow

So… it just ignores your animation-name and animation-duration.

I think there's a good reason for that, i sure am glad there are no websites with psychedelic text selection effects.

Using JS, you can get text selection position, place a temporary element below it (using position: absolute or fixed, and negative z-index) and animate it's background.

A quick-n-dirty example (ineffective and doesn't handle multiline selections properly):

"use strict";

function updateFakeSelection() {
  // remove the previous fake-selection element:
  document.querySelectorAll(".fake-selection").forEach(function (e) {
    return e.parentNode.removeChild(e);
  });

  // get text selection position:
  var rect = window.getSelection().getRangeAt(0).getBoundingClientRect();

  // create a new element:
  var div = document.createElement("div");
  div.classList.add("fake-selection");

  // position it:
  div.style.left = rect.left + "px";
  div.style.top = rect.top - 1 + "px";
  div.style.width = rect.width + "px";
  div.style.height = rect.height + 2 + "px";
  // (these '-1' and '+2' are there just to give it a bit of extra height)

  // …and finally place it to the document:
  document.body.appendChild(div);
}

// execute the function when the text selection is changed or window is scrolled:
document.addEventListener("selectionchange", updateFakeSelection);
window.addEventListener("scroll", updateFakeSelection);

::selection {
  background-color: transparent;
}

::-moz-selection {
  background-color: transparent;
}

.fake-selection {
  position: fixed;
  animation: colorchange 1.5s infinite alternate;
  z-index: -1;
}


@keyframes colorchange {
  0% {
    background-color: hotpink;
  }

  50% {
    background-color: crimson;
  }

  100% {
    background-color: sandybrown;
  }
}

<p>Aliquam ornare wisi eu metus. Fusce nibh. Ut tempus purus at lorem. Aenean placerat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce nibh. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi scelerisque luctus velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.</p>

<p>Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Fusce wisi. Sed ac dolor sit amet purus malesuada congue. Suspendisse sagittis ultrices augue. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. In rutrum. Etiam dictum tincidunt diam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in lorem sit amet leo accumsan lacinia. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Aliquam ante.</p>

<p>Donec vitae arcu. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Etiam posuere lacus quis dolor. Aenean fermentum risus id tortor. Aenean vel massa quis mauris vehicula lacinia. Aenean id metus id velit ullamcorper pulvinar. Aliquam id dolor. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nullam dapibus fermentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In enim a arcu imperdiet malesuada.</p>

<p>Aliquam ornare wisi eu metus. Fusce nibh. Ut tempus purus at lorem. Aenean placerat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce nibh. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi scelerisque luctus velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.</p>

<p>Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Fusce wisi. Sed ac dolor sit amet purus malesuada congue. Suspendisse sagittis ultrices augue. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Mauris elementum mauris vitae tortor. In rutrum. Etiam dictum tincidunt diam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in lorem sit amet leo accumsan lacinia. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Aliquam ante.</p>

<p>Donec vitae arcu. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Etiam posuere lacus quis dolor. Aenean fermentum risus id tortor. Aenean vel massa quis mauris vehicula lacinia. Aenean id metus id velit ullamcorper pulvinar. Aliquam id dolor. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nullam dapibus fermentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In enim a arcu imperdiet malesuada.</p>

If you decide to use something similar, just changing the element size would be more effective than destroying and creating it after each selection change.

Please don't be evil. :)

Answer 2

Yes, background-color is animatable but here the problem:

We just can use these properties within the selector ::selection in css:

• color
• background-color
• cursor
• caret-color
• outline and its longhands
• text-decoration and its associated properties
• text-emphasis-color
• text-shadow

Yes I know it's sad but... that's what we have

By the way, you can know more about it going to this link

https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aselection