Блог

Пытаясь вставить div, подождите, затем снова уберите его из поля зрения.

Код, который я пробовал..

 <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; }
} 
 

Который не скользит внутрь, ждет, а затем снова выскальзывает, в данный момент это больше похоже на то, что внезапно появляется и не исчезает.

вы можете попробовать это

 $(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>