CODEWITHSUNDEEP
htmlcsscss-animationscss-transitions
Sam
Sam

Reputation: 525

Triggering a transition mid-animation CSS

Been trying to trigger a transition using :hover in a running animation using CSS, in the example below, only the background-color changes on :hover but the transform property is triggered only after an animation stops. How can I trigger the transform: rotate during the animation?

Also, my initial background-color: red seems to fade-in when I reload the page without me explicitly triggering it by :hover. I assume it's caused by the transition-duration, can this be avoided using only CSS?

.container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
  animation-delay: 0;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transition-duration: 5s;
  transition-property: all;
}

.red:hover {
  transform: rotate(180deg);
  background-color: teal;
}

@keyframes animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}
<body>
  <div class="container">
    <div class="red"></div>
  </div>
</body>

Upvotes: 1

Views: 407

Answers (1)

Turnip
Turnip

Reputation: 36632

Transforms do not stack in this way. One way to work around this limitation could be to use a parent element for the rotation transform.

.container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
  animation-delay: 0;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transition-duration: 5s;
  transition-property: all;
}

.red:hover {
  background-color: teal;
}

.wrap {
  transition: all 5s;
}

.wrap:hover {
  transform: rotate(180deg);
}

@keyframes animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}
<body>
  <div class="container">
    <div class="wrap">
      <div class="red"></div>
    </div>
    
  </div>
</body>

Upvotes: 3

Related Questions