CODEWITHSUNDEEP
csstransition
Kokodoko
Kokodoko

Reputation: 28158

CSS animation forwards is preventing css transitions

I am setting my CSS animation type to forwards so that the finished frame of the animation is the default state when finished.

But now, the transition that animates the same property (transform) is not working anymore...

I have to use forwards because otherwise the opacity resets to 0 after animating.

How can I enable a transition as soon as an animation has finished? I am looking for a CSS-only option without javascript.

CSS

album {
    opacity: 0;
    animation:movein 0.6s forwards;
    transition: all 0.3s ease-in-out;
}

album:hover {
    transform:scale(1.05);                       // this doesn't work
    box-shadow: 0px 0px 45px rgba(0,0,0,0.5);    // this works
}

@keyframes movein {
  from {
    opacity:0;
    transform: translateX(-100px);
  }

  to {
    opacity:1;
    transform: translateX(0px);
  }
}

album:nth-child(2) {
    animation-delay: 0.2s;       // delay keeps opacity 0 for a while
}
album:nth-child(3) {
    animation-delay: 0.4s;       // delay keeps opacity 0 for a while
}

Upvotes: 1

Views: 189

Answers (1)

Kunukn
Kunukn

Reputation: 2236

One solution could be to split up your animation. Only the fadein animation has animation forwards.

album {
    opacity: 0;
    animation:movein 0.6s, fadein 0.6s forwards;
    transition: all 0.3s ease-in-out;
}
@keyframes movein {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes fadein {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }

}

Upvotes: 2

Related Questions