CSS3 background image transition

Question

I\'m trying to make a \"fade-in fade-out\" effect using the CSS transition. But I can\'t get this to work with the background image...

The CSS:

Answer 1

If animating opacity is not an option, you can also animate background-size.

For example, I used this CSS to set a backgound-image with a delay.

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}