.container {   width: 200px;   margin: 0 auto; } .aninode {   visibility: hidden; } .animated .aninode {   visibility: visible; } .targets {   margin: 20px 0; } .targets .item {     border: 1px solid #ccc;     margin: 10px 0;     line-height: 2;     padding: 2px 6px;     border-radius: 4px; } .animated .topIn {   animation: topIn 1s ease; } .animated .leftIn {   animation-name: leftIn;   animation-duration: 1s; } .btn {   width: 100px;   height: 30px;   border: 1px solid #ccc;   outline: none;   transition: 0.1s; } .btn:active {   border: none;   background: orange;   color: #fff; } @keyframes topIn {   from { transform: translateY(-50px) }   to { transform: translateY(0px) } } @keyframes leftIn {   from {      transform: translateX(-50px);     opacity: 0;    }   to {      transform: translateX(0px);     opacity: 1;    } } .delay200 {     animation-delay: 200ms;     animation-fill-mode: backwards!important; } .delay400 {     animation-delay: 400ms;     animation-fill-mode: backwards!important; } .delay600 {     animation-delay: 600ms;     animation-fill-mode: backwards!important; } .delay800 {     animation-delay: 800ms;     animation-fill-mode: backwards!important; } var show = document.querySelector('.show'); var hide = document.querySelector('.hide'); var container = document.querySelector('.container'); show.addEventListener('click', function() {   container.classList.add('animated'); }, !1); hide.addEventListener('click', function() {   container.classList.remove('animated'); }, !1);

我们发现js的逻辑并没有发生任何改变。仍然仅仅只是在合适的位置添加/删除animated。

彩蛋：

在实践中我们还会遇到一个比较麻烦的事儿。就是延迟class的编写。我们可能并不知道会使用到那些时差，有多少个元素会使用到，如果都用手来写的话，重复工作确实太过麻烦。因此我们可以使用js动态插入。代码如下：

const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
    styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
    delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
    var sheets = document.styleSheets;
    var len = sheets.length;
    for(var i = 0; i <= len; i++) {
        var sheet = sheets.item(i);
        try {
            if (sheet.cssRules) {
                return sheet;
            }
        } catch(e) {} 
    }
    var style = document.createElement('style');
    style.type = "text/css";
    document.getElementsByTagName('head')[0].appendChild(style);
    return style.sheet;
}

感谢你能够认真阅读完这篇文章，希望小编分享的“css3怎么实现多个元素依次显示效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!

当前题目：css3怎么实现多个元素依次显示效果-创新互联
当前链接：http://jxjierui.cn/article/disoie.html