css - 动画到过渡 css 属性

Question

下面链接中的代码假设制作一个动画，在 5 秒后(这只是一个模拟 - 在现实世界场景中，触发器将在内容加载时)，应该结束动画并继续过渡属性(点应将其大小更改为 0 并到达初始位置)。

JsFiddle code

#loading-icon {
    display: flex;
    width: 100px;
    height: 50px;
    align-items: center;
  justify-content: center;
}

#shell.done .dot {
    width: 0px;
    height: 0px;
    top: 0;
    animation: none;
    transition: 2s all;
}

.dot {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 5px;
    border-radius: 100%;
    background-color: red;
    animation-timing-function: linear;
    animation-play-state: running;
}

@keyframes bounce {
    0% {
        top: 0%;
        width: 12px;
        height: 12px;
        animation-timing-function: eas-out;
  }
  25% {
    top: -50%;
        animation-timing-function: ease-in-out;
  }
    50% {
        width: 20px;
        height: 20px;
    }
  75% {
        top: 50%;
        animation-timing-function: ease-in;
  }
    100% {
        width: 12px;
        height: 12px;
        top: 0%;
  }
}

.dot:nth-child(1) {
    animation: bounce 2s infinite;
}

.dot:nth-child(2) {
    animation: bounce 2s infinite;
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation: bounce 2s infinite;
    animation-delay: 0.4s;
}

知道如何实现这种行为吗？

谢谢!

Answer 1

您可以尝试使用迭代和 animationend 事件:

var x=document.querySelectorAll('.dot');
for(var i=0;i<x.length;i++) {
  x[i].addEventListener("animationend", function(e){
     setTimeout(function(a = e.target) {
        a.classList.add('done');
     },500);
  })
}

#loading-icon {
  display: flex;
  width: 100px;
  height: 50px;
  align-items: center;
  justify-content: center;
}



.dot {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 5px;
  border-radius: 100%;
  background-color: red;
  transition:0.5s;
}

.done {
  width: 0px;
  height: 0px;
}

@keyframes bounce {
  0% {
    top: 0%;
    width: 12px;
    height: 12px;
    animation-timing-function: eas-out;
  }
  25% {
    top: -50%;
    animation-timing-function: ease-in-out;
  }
  50% {
    width: 20px;
    height: 20px;
  }
  75% {
    top: 50%;
    animation-timing-function: ease-in;
  }
  100% {
    width: 12px;
    height: 12px;
    top: 0%;
  }
}

.dot:nth-child(1) {
  animation: bounce 2s;
  animation-iteration-count: 3;
}

.dot:nth-child(2) {
  animation: bounce 2s;
  animation-delay: 0.2s;
  animation-iteration-count: 3;
}

.dot:nth-child(3) {
  animation: bounce 2s;
  animation-delay: 0.4s;
  animation-iteration-count: 3;
}

<div id="shell">
  <div id="loading-icon">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>