到过渡CSS属性的动画

Question

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

JSFIDDLE代码

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