CODEWITHSUNDEEP
htmlcss
gurveer arora
gurveer arora

Reputation: 71

How to delay a keyframe animation

I'm trying to add a delay to a keyframe while having it stay in the starting position. So I want my logo to slide in first, and then my nav bar, but the issue is when I add a delay to the animation, it is in the end position inside the viewport rather than outside, and it isn't letting me have two animations on the same element, how can i make it so that my animation is delayed by 500ms without having it appear inside the viewport where it is meant to end. Sorry if this is a very basic question but the solutions i tried didn't seem to work. Thanks

.logo {
  width: 100px;
  position: relative;
  animation: slideintop 500ms ease-in-out;
}

header {
  background: radial-gradient(#fff, #ffd6d6);
}

nav {
  flex: 1;
  text-align: right;
  position: relative;
  animation: delayslideintop 500m;
  animation: slideintop 450ms ease-in-out 500ms;
}

@keyframes slideintop {
  0% {
    top: -105px;
  }
  100% {
    top: 0px;
  }
}

@keyframes delayslideintop {
  0% {
    top: -105px;
  }
  100% {
    top: -105px;
  }

Upvotes: 0

Views: 133

Answers (1)

gugateider
gugateider

Reputation: 2039

logo {
  width: 100px;
  position: relative;
  animation: slideintop 500ms ease-in-out;
}

header {
  background: radial-gradient(#fff, #ffd6d6);
}

nav {
  flex: 1;
  text-align: right;
  position: relative;
  animation: slideintop 450ms ease-in-out 500ms;
  animation-fill-mode: backwards;
}

@keyframes slideintop {
  0% {
    top: -105px;
  }
  100% {
    top: 0px;
  }
}

@keyframes delayslideintop {
  0% {
    top: -105px;
  }
  100% {
    top: -105px;
  }
<header>
<logo>logo</logo>
<nav>nav</nav>
</header>

What you need is the property animation-fill-mode

So add animation-fill-mode: backwards; for the nav element. That should do it

Upvotes: 3

Related Questions