CODEWITHSUNDEEP
csscss-animationscss-transitions
Tom Yemm
Tom Yemm

Reputation: 53

How to animate element again, after animation-fill-mode: forward?

So I have a grid of elements and I have set them to fade in one after the other on page load.

So they have a 0.2s delay from one element to the next fading in from opacity 0 to opacity 1.

I then want images in these elements to grow when there grid section is highlighted, but my animation-fill-mode is preventing this.

Any work arounds?

//Expand when hover over.
.main-image {
  transition: transform .2s ease-in-out;
}

#portfolio:hover #portfolio-image {
transform: scale(1.1);
}


// Fade in with delay
@keyframes fadeInFromAbove {
    0% {
        transform: translateY(-30%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#portfolio .main-image {
  opacity: 0;
  animation: 0.5s ease-out 0.2s 1 fadeInFromAbove;
  animation-fill-mode: forwards;
}

HTML formatting:

<div id='portfolio' class='main-block'>
      <div id='portfolio-image' class='main-image'></div>
</div>

Upvotes: 4

Views: 965

Answers (1)

Temani Afif
Temani Afif

Reputation: 273797

Use two animations like below:

.main-image {
  transition: transform .5s ease-in-out;
  height: 50px;
  margin: 10px;
  background: red;
}

#portfolio:hover #portfolio-image {
  transform: scale(1.1);
}

@keyframes fade {
  100% {
    opacity: 1;
  }
}
@keyframes move {
  0% {
    transform: translateY(-30%);
  }
}

#portfolio .main-image {
  opacity: 0;
  animation: 
    0.5s ease-out 0.2s fade forwards, /* forwards only for opacity */
    0.5s ease-out 0.2s move;
}
<div id='portfolio' class='main-block'>
  <div id='portfolio-image' class='main-image'></div>
</div>

Upvotes: 4

Related Questions