.container {   width: 100px;   margin: 0 auto; } .aninode {   visibility: hidden; } .animated .aninode {   visibility: visible; } .target {   width: 100px;   height: 100px;   background: orange;   border-radius: 4px;   margin: 20px 0; } .animated .topIn {   animation: topIn 1s ease; } .animated .leftIn {   animation: leftIn 1s ease; } .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);     opacity: 0;    }   to {      transform: translateY(0px);     opacity: 1;    } } @keyframes leftIn {   from {      transform: translateX(-50px);     opacity: 0;    }   to {      transform: translateX(0px);     opacity: 1;    } } 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);

Demo显示如下：

See the Pen NXKrPg by Ormie (@yangbo5207) on CodePen.

codepen demo 地址

但是这样离我们想要的效果好像还差一点点。继续思考。首先想要后面的元素比前一个元素晚一点出现，那么肯定是要控制延迟时间，我们就必须有许多设置延迟时间的class。

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

animation-fill-mode: backwards!important; 的目的是为了元素在出现之前，保持透明度为0的状态。防止当添加 animated 之后元素直接出现了。

加 !important 是为了防止在新的class中使用animation简写时对 animation-fill-mode 的属性进行覆盖改写。如果此处不写 !important 的话，那么在 topIn 这样的动画class中就不能使用简写形式。

这样之后，我们只需要在css中添加上上述代码，并对html做一些改动，就能够实现我们想要的效果了。

See the Pen mpbEEE by Ormie (@yangbo5207) on CodePen.

codepen demo 地址

完整代码如下：

  
      春晓

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