Animate background color to slide down when adding/removing class, only with CSS?

Question

Hello I need to animate the changing of the background of a div, with the new background sliding down from above.

This is an example of what I can do now and the context of my question.

I need to trigger the animation by adding and removing classes:

.token {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
  margin-bottom: 20px;
  transition: background 1000ms linear;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

As you can see I've already put a small animation, but I'm not sure if the slide down effect I need is possible with CSS alone.

What I would like is to be able to create multiple classes each changing the background of the div they're applied to via sliding down.

I need the animation to be triggered by adding a class, the class should contain the colour to transition to.

@VitaliiChmovzh I don't see that as being helpful to the situation I described the animation in that example is only between 2 colours (I need it to work for any number of colours) and that animation is triggered by a hover while I need it to be triggered by adding a class. — George Bora, Feb 10 '18 at 16:17
What you are trying to do is greatly explained here: https://stackoverflow.com/questions/25543956/toggle-class-on-html-element-without-jquery — trojan03, Feb 10 '18 at 16:25
@trojan03 sorry but that question does not help at all, I am not asking how to manipulate classes from js I am asking about css animations. — George Bora, Feb 10 '18 at 20:44
It's unclear what your actual question is, George. You *seem* to be asking how to create a 'slide down' effect with CSS. But then when given a question that demonstrates how to do that, you say the mechanism that triggers the slide down is not the same as what you want. But then you comment saying you are not concerned with how to trigger the change. So what is it you are actually asking for help with here? — TylerH, Feb 10 '18 at 21:28

score 1 · Accepted Answer · answered Feb 10 '18 at 20:24

You can use linear-gradient for the color and you will able to create your effect by adjusting background-size.

Here is an idea:

let previousClass="";
function color(className) {
  $('#token').removeClass(previousClass);
  previousClass=className;
  setTimeout(function() {
      $('#token').addClass(previousClass);
  }, 500);

}

.token {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
  margin-bottom: 20px;
  background-size: 100% 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white);
  transition: 0.5s background-size linear;
}

.red {
  background-image: linear-gradient(red, red);
  background-size: 100% 100%;
}

.blue {
  background-image: linear-gradient(blue, blue);
  background-size: 100% 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="token" id="token"></div>
<button onclick="color('red')">Red</button>
<button onclick="color('blue')">Blue</button>

@GeorgeBora in this case yes :) because if the transition ... if you change the class without delay the second time you won't have transition as the background-size is already 100% — Temani Afif, Feb 10 '18 at 20:50
@GeorgeBora make the intial linear gradient different from white and you will undrestand what is happening ;) — Temani Afif, Feb 10 '18 at 20:52

Animate background color to slide down when adding/removing class, only with CSS?

1 Answers1