Slide in, wait, slide out CSS animation

user_4772471 0
Viewed 339

Trying to slide a div in, wait, then slide it back out of view again.

Code I've tried..

<div class="content slidein-wait-slideout-animation">content to display...</div>
.content {
  background-color: #ccc;
  height: 200px;
  width: 100%;
}

.slidein-wait-slideout-animation {
  animation: slidein 4000ms, slideout 10000ms;
}


@keyframes slidein {
  0% { width: 0; opacity: 0; }
  10% { width: 10%; opacity: 0; }
  50% { width: 50%; opacity: 0; }
  100% { width: 100%; }
}

@keyframes slideout {
  0% { width: 100%; }
  10% { width: 50%; opacity: 0; }
  50% { width: 10%; opacity: 0; }
  100% { width: 0; opacity: 0; }
}

Which is not sliding in, waiting then sliding out again, at the moment it's more like suddenly on display and does not go away.

css-animations css html
1 Answers

you can try this

$(document).ready(function() {
  $('button').click(function() {
    $('.content').slideUp(500).delay(5000).slideDown(500);
  });
});
.content {
  height: 200px;
  background-color: #19c63c;
  border: 1px solid #169630;
  margin: 20px;
  padding: 20px;
  opacity: 1;
}

.hide {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Start</button>
<div class="content">content to display...</div>

user_128181390
Related