我需要在有限的时间内显示文本，然后在同一地点，依此类推， noove Just 外观和失踪所有及时的文本。
<!DOCTYPE html><html><head>
<style>
/* Safari 4.0 - 8.0 */@-webkit-keyframes example {from {background-color:
red;}to {background-color: yellow;}}
/* Standard syntax */@keyframes example {from {}to {background-color:
yellow;}}
</style></head>
<body>
<div style="width: 300px;
height: 300px;
background-color: black;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;">1st Text</div>
<script>
var i=1;
while(i<7){document.write("d");i++;}
</script>
</body></html>
我包括一个我认为需要的实时样本。
'use strict';
window.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
var wrapper = document.getElementById('wrapper');
if (typeof wrapper.classList !== 'undefined') {
wrapper.classList.add('slide-items');
}
else {
var curentclass = wrapper.className;
currentclass += ' slide-items';
wrapper.className = currentclass;
}
}, 2000);
});.wrapper {
position: relative;
overflow: hidden;
}
.wrapper > p {
padding: 12px 7px;
background-color: #ddd;
color: #000;
position: relative;
transition-timing-function: ease;
transition-duration: 0.6s;
opacity: 0;
}
.delay1 {
transition-delay: 0.6s;
}
.delay2 {
transition-delay: 1.2s;
}
.delay3 {
transition-delay: 1.8s;
}
.delay4 {
transition-delay: 1.2s;
}
.wrapper.slide-items-in-from-bottom > p {
-ms-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.wrapper.slide-items > p {
opacity: 1;
-ms-transform: none;
-webkit-transform: none;
transform: none;
}<div class="wrapper slide-items-in-from-bottom" id="wrapper">
<p>This is paragraph one</p>
<p class="delay1">This is paragraph two</p>
<p class="delay2">this is paragraph three</p>
<p class="delay3">this is paragraph four</p>
</div>