Hey there, I'm looking to add some pizzazz to my website by animating the background of a div. My goal is to have the new background slide down from above for a cool effect.
If you want an idea of what I can currently achieve and the context of my question, check out this example.
To make this happen, I plan on adding and removing classes as triggers:
.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;
}
I've already created a simple animation, but I'm uncertain if CSS alone can give me the desired slide down effect.
My vision is to generate multiple classes, each altering the background of the applied div through a sliding down motion.
The animation should activate once a specific class is added, with that class dictating the color transition.