滑入、等待、滑出 CSS 动画

Question

尝试将 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; }
} 

哪个不滑进去，等着又滑出来，此刻更像是突然现身，不会消失。

Answer 1

你可以试试这个

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