html - CSS3 动画在帧之间停止延迟

Question

我正在尝试使用 css 为我的 Logo 制作动画，我想要的是每个 Logo 从顶部淡入然后停在某个点，然后淡出到底部，但无法做到这一点，这可能吗？

.logo {
    width: 50px;
    height: 50px;
    background: whitesmoke;
    transform: rotate(45deg);
    position: absolute;
    border-radius: 5px;
    border: 2px solid white;
}

#logo {
    width: 500px;
    height: 500px;
    margin: auto;
    margin-top: 100px;
    position: relative;
}

#logo-1 {
    top: 0px;
    animation: loading3 4s linear infinite normal;
}

#logo-2 {
    top: -10px;
    animation: loading2 3s linear infinite normal;
}

#logo-3 {
    top: -20px;
    animation: loading1 2s linear infinite normal;
}

@keyframes loading1 {
  0% {background: white;opacity: 0;top: -120px;}
  50% {background:#f44;opacity: 1;top: -50px;}
  65% {background:#f44;opacity: 1;top: -20px;}
  75% {background:#f44;opacity: 1;top: -20px;}
  100% {background: white;opacity: 0;top: 50px;}
}

@keyframes loading2 {
  0% {background: white;opacity: 0;top: -120px;}
  50% {background:#f44;opacity: 1;top: -50px;}
  65% {background:#f44;opacity: 1;top: -10px;}
  75% {background:#f44;opacity: 1;top: -10px;}
  100% {background: white;opacity: 0;top: 50px;}
}

@keyframes loading3 {
  0% {background: white;opacity: 0;top: -120px;}
  50% {background:#f44;opacity: 1;top: -50px;}
  65% {background:#f44;opacity: 1;top: 0px;}
  75% {background:#f44;opacity: 1;top: 0px;}
  100% {background: white;opacity: 0;top: 50px;}
}

<div id="logo">
  <div class="logo" id="logo-1"></div>
  <div class="logo" id="logo-2"></div>
  <div class="logo" id="logo-3"></div>
</div>

Note: logo-3 should come first and stop, then logo-2 come and stop, then logo-1 come and stop then logo-3 should go first, then logo-2 then logo-1, one by one.

原始标志是:

Answer 1

没有办法在中间停止 CSS 动画然后继续，因此我很少使用 JavaScript。

我们所做的是，我们将所有三个动画分成两部分，第一个用于所有三个运行，然后是第二个。我已经划分了动画，然后使用带有 JavaScript 的类来激活这些动画。这个解决方案并不复杂，只是冗长。

function animateLogo() {
    logo1 = document.getElementById('logo-1');
    logo2 = document.getElementById('logo-2');
    logo3 = document.getElementById('logo-3');
    
    if(logo1.classList.contains('anim31')) {
       logo1.classList.remove('anim31'); 
       logo1.classList.add('anim32'); 
    } else {
        logo1.classList.add('anim31');
        logo1.classList.remove('anim32');
    }
    
    if(logo2.classList.contains('anim21')) {
       logo2.classList.remove('anim21'); 
       logo2.classList.add('anim22'); 
    } else {
        logo2.classList.add('anim21');
        logo2.classList.remove('anim22');
    }
    
    if(logo3.classList.contains('anim11')) {
       logo3.classList.remove('anim11'); 
       logo3.classList.add('anim12'); 
    } else {
        logo3.classList.add('anim11');
        logo3.classList.remove('anim12');
    }

}

setInterval(animateLogo, 3000); // The time is the amount of milliseconds our longest animation will take i.e 3s

.logo {
    width: 50px;
    height: 50px;
    background: whitesmoke;
    transform: rotate(45deg);
    position: absolute;
    border-radius: 5px;
    border: 2px solid white;
}

#logo {
    width: 500px;
    height: 500px;
    margin: auto;
    margin-top: 100px;
    position: relative;
}

#logo-1 {
    top: 0px;
}

#logo-1.anim31 {
    animation: loading31 3s linear forwards normal;
}

#logo-1.anim32 {
    animation: loading32 1s linear forwards normal;
}

@keyframes loading31 {
    0% {
        background: white;
        opacity: 0;
        top: -120px;
    }
    65% {
        background: #f44;
        opacity: 1;
        top: -50px;
    }
    75% {
        top: -50px;
    }
    100% {
        background: #f44;
        opacity: 1;
        top: 0px;
    }
}

@keyframes loading32 {
    0% {
        background: #f44;
        opacity: 1;
        top: 0px;
    }
    65% {
        background: #f44;
        opacity: 1;
        top: 0px;
    }
    100% {
        background: white;
        opacity: 0;
        top: 50px;
    }
}

#logo-2 {
    top: -10px;
}

#logo-2.anim21 {
    animation: loading21 2s linear forwards normal;
}

#logo-2.anim22 {
    animation: loading22 2s linear forwards normal;
}

@keyframes loading21 {
    0% {
        background: white;
        opacity: 0;
        top: -120px;
    }
    65% {
        background: #f44;
        opacity: 1;
        top: -50px;
    }
    75% {
        top: -50px;
    }
    100% {
        background: #f44;
        opacity: 1;
        top: -10px;
    }
}

@keyframes loading22 {
    0% {
        background: #f44;
        opacity: 1;
        top: -10px;
    }
    65% {
        background: #f44;
        opacity: 1;
        top: -10px;
    }
    100% {
        background: white;
        opacity: 0;
        top: 50px;
    }
}

#logo-3 {
    top: -20px;
}

#logo-3.anim11 {
    animation: loading11 1s linear forwards normal;
}

#logo-3.anim12 {
    animation: loading12 3s linear forwards normal;
}

@keyframes loading11 {
    0% {
        background: white;
        opacity: 0;
        top: -120px;
    }
    65% {
        background: #f44;
        opacity: 1;
        top: -50px;
    }
    75% {
        top: -50px;
    }
    100% {
        background: #f44;
        opacity: 1;
        top: -20px;
    }
}

@keyframes loading12 {
    0% {
        background: #f44;
        opacity: 1;
        top: -20px;
    }
    65% {
        background: #f44;
        opacity: 1;
        top: -20px;
    }
    100% {
        background: white;
        opacity: 0;
        top: 50px;
    }
}

<body>
    <div id="logo">
        <div class="logo anim31" id="logo-1"></div>
        <div class="logo anim21" id="logo-2"></div>
        <div class="logo anim11" id="logo-3"></div>
    </div>
</body>

我希望这是预期的结果。如果没有，请在下面发表评论，我将编辑答案。

P.S:调整动画的时间，使其更快/更慢。