CODEWITHSUNDEEP
htmlcsscss-animations
torresito
torresito

Reputation: 75

CSS animation: slide div in and out after x second

I am trying to slide div in after 1 second and slide it out after 4 seconds exactly the same way. is it possible?

The second problem is, that the black div(second div), disappears after the animation. 

.first {
  width: 100px;
  height: 100px;
  background: red;
  animation-name: example;
  animation-duration: 2s;
}

.second {
  width: 0;
  height: 100px;
  background: black;
  margin-top: -100px;
  margin-left: 100px;
  animation-name: example2;
  animation-delay: 2s;
  animation-duration: 2s;
}

@keyframes example {
  from {
    margin-left: -200px
  }
  to {
    margin-left: 0px
  }
}

@keyframes example2 {
  from {
    width: 0px
  }
  to {
    width: 250px
  }
}
<div class="first"></div>
<div class="second"></div>

JSFiddle

Upvotes: 2

Views: 3566

Answers (1)

user9112752
user9112752

Reputation:

if you use percentages you can do what you want. You can define your animation just as you like.

@keyframes example {
  0%, 100% {
    margin-left: -200px
  }
  10%, 90% {
    margin-left: 0px
  }
}

set the animation delay to 1s. you need to experiment with the percentages for your need

The second div is going to its original state after the animation. This will set the css stile after the animation is over

animation-fill-mode: forwards;

Upvotes: 3

Related Questions