滑入，等待，滑出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>