CSS3动画使帧间延迟停止

Question

我试图用css动画我的标志，我想要的是每个标志从顶部淡入，然后停在某个点，然后淡出到底部，但不能做到这一点，这是可能的吗？

​

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

​

注意: logo-3应该先来然后停止，然后logo-2来和停止，然后徽标-1来然后停止然后徽标-3应该先走，然后徽标-2然后徽标-1，一个接一个。

原来的标志是：

​

​

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>

​

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

播放动画的时间，以使它更快/更慢。