CODEWITHSUNDEEP
htmlcsscss-animations
DrDecane
DrDecane

Reputation: 25

CSS: Change color of div during animation of another one

I want to change the color of a div for the time another div goes through its animation. I already got my html file ready:

   .body {
      width: 1200px;
      background-color: white;
      font-family: sans-serif;
      font-size: 20px;
      margin: 50px;
    }

    .bar {
      stroke: black;
      stroke-width: 0.1;
      background-color: cornflowerblue;
      width: 500px;
      height: 25px;
      left: 100px;
      top: 100px;
      position: absolute;
      animation-name: expandBar;
      animation-duration: 2s;
      animation-delay: 1s;
      animation-fill-mode: both;
      transition-timing-function: ease-in-out;
    }
    @keyframes expandBar {
      from {
          width: 0px;
      }
      to {
          width: width;
      }
    }

    .box {
      stroke: black;
      stroke-width: 0.1;
      background-color: cornflowerblue;
      width: 100px;
      height: 100px;
      left: 100px;
      top: 135px;
      position: absolute;
    }
    <html lang="de">
      <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <link rel="stylesheet" href="bc.css" />
      </head>

      <body>
        <div class="bar"></div>
        <div class="box"></div>
      </body>
    </html>

For starters, I tried using following code to test how this works (I've seen that on the internet). Works fine.

.bar:hover ~ .box{
  background-color: red;
}

However, I now don't know how to adress the animation of the bar element. I want the box to be red during the 2 seconds the bar expands.

Is there something like a keyword instead of hover I could use for that? Or is there another way to do it?

Upvotes: 0

Views: 1570

Answers (3)

retterBadach
retterBadach

Reputation: 86

Incorporate the color change in your css @keyframes animation.

@keyframes changeBox {
  0% {  background-color: red; }
  99.99% { background-color: red; }
  100% { background-color: cornflowerblue;  }
}
.box {
  stroke: black;
  stroke-width: 0.1;
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 135px;
  position: absolute;
  animation-name: changeBox;
  animation-duration: 2s;
  animation-delay: 1s;
  transition-timing-function: ease-in-out;
}

Upvotes: 0

Uchendu
Uchendu

Reputation: 1066

I can't directly think of a solution only using CSS. But a little javascript might help. There is onanimationstart and onanimationend that might help you. Link to MDN doc

Below a working example.

let bar = document.getElementById("bar")
let box = document.getElementById("box")

bar.onanimationstart = function(event){
  box.classList.add("red")
}

bar.onanimationend = function(event){
  box.classList.remove("red")
}
#body {
  width: 1200px;
  background-color: white;
  font-family: sans-serif;
  font-size: 20px;
  margin: 50px;
}

#bar {
  stroke: black;
  stroke-width: 0.1;
  background-color: cornflowerblue;
  width: 500px;
  height: 25px;
  left: 100px;
  top: 100px;
  position: absolute;
  animation-name: expandBar;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: both;
  transition-timing-function: ease-in-out;
}
@keyframes expandBar {
  from {
      width: 0px;
  }
  to {
      width: width;
  }
}

#box {
  stroke: black;
  stroke-width: 0.1;
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 135px;
  position: absolute;
}

.red{
  background-color: red !important;
}
<!DOCTYPE html>

<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link rel="stylesheet" href="bc.css" />
  </head>

  <body>
    <div id="bar"></div>
    <div id="box"></div>
  </body>
</html>

Upvotes: 2

Bram Werink
Bram Werink

Reputation: 38

try

@keyframes expandBar {
  from {
      width: 0px;
  }
  to {
      width: width;
background:red;
  }
}

and add transition:2s in the .bar styling.

Upvotes: 0

Related Questions