CSS3 动画完成后增加文本

Question

我是 CSS 动画的新手，所以我制作了这个小项目，其中有一个盒子在弹跳，它看起来很真实。我希望每次框 bounces/the 动画完成时框内的文本（开始时它只是一个 0）递增 1。我尝试使用计数器，但它一直在重置。

这是我的代码：

* {
  font-family: sans-serif;
}

#container {
  border-bottom: 3px solid #444;
  display: flex;
  height: 330px;
  width: 100%;
}

#oboing {
  align-self: flex-end;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background-color: black;
  height: 200px;
  margin: 0 auto 0 auto;
  transform-origin: bottom;
  width: 200px;
}

#counter::before {
  color: white;
  position: relative;
  left: 40%;
  top: 40%;
  font-size: 50px;
  content: counter(bounceCount);
}

#oboing {
  animation-name: oboing;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

@keyframes oboing {
  0% {
    transform: scale(1, 1) translateY(0);
    counter-reset: bounceCount, calc(counter(bounceCount)+1)
  }
  10% {
    transform: scale(1.1, .9) translateY(0)
  }
  30% {
    transform: scale(.9, 1.1) translateY(-100px);
  }
  50% {
    transform: scale(1.05, .95) translateY(0)
  }
  57% {
    transform: scale(1, 1) translateY(-7px);
  }
  64% {
    transform: scale(1, 1) translateY(0)
  }
  100% {
    transform: scale(1, 1) translateY(0);
    counter-increment: bounceCount;
  }
}

body {
  background: linear-gradient(191deg, #3a22bd, #ea2b0b);
  background-size: 400% 400%;
  height: 100vh;
  overflow: hidden;
  -webkit-animation: Colors 4s ease infinite;
  -moz-animation: Colors 4s ease infinite;
  -o-animation: Colors 4s ease infinite;
  animation: Colors 4s ease infinite;
}

@-webkit-keyframes Colors {
  0% {
    background-position: 0% 52%
  }
  50% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

@-moz-keyframes Colors {
  0% {
    background-position: 0% 52%
  }
  50% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

@-o-keyframes Colors {
  0% {
    background-position: 0% 52%
  }
  50% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

@keyframes Colors {
  0% {
    background-position: 0% 52%
  }
  50% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

<div id='container'>
  <div id='oboing'>
    <span id='counter'>0</span>
  </div>
</div>

我愿意接受任何建议，包括 CSS、HTML、Jquery、JS 等...

如果有人也能解释为什么他们的代码可以工作，我将不胜感激......很多时候我在这个网站上看到只有代码而没有解释的答案。请解释！

Answer 1

By it's definition, counter-increment is a non-animatable css 属性 - 这就是为什么你没有成功地在你的动画中使用它。您将不得不使用 javascript 函数来计算退回次数。由于动画持续时间为 2 秒，一种方法是使用设置间隔方法并每 2 秒递增一次计数器。

document.getElementById('counter').innerHTML = 0; 
function increment() {
     var x = document.getElementById('counter').innerHTML;
     //if we declare the x value as 0, it will keep resetting, 
     //so instead, put we retrieve the initial value from the span 
     //and set the variable to that value
     x++;
     //increase by 1
    document.getElementById('counter').innerHTML = x; //set span value
}
setInterval(increment, 2000);  //1000ms in 1 sec

* {
  font-family: sans-serif;
}

#container {
  border-bottom: 3px solid #444;
  display: flex;
  height: 330px;
  width: 100%;
}

#oboing {
  align-self: flex-end;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background-color: black;
  height: 200px;
  margin: 0 auto 0 auto;
  transform-origin: bottom;
  width: 200px;
}

#counter {
  color: white;
  position: relative;
  left: 40%;
  top: 40%;
  font-size: 50px;
}

#oboing {
  animation-name: oboing;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

@keyframes oboing {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, .9) translateY(0)
  }
  30% {
    transform: scale(.9, 1.1) translateY(-100px);
  }
  50% {
    transform: scale(1.05, .95) translateY(0)
  }
  57% {
    transform: scale(1, 1) translateY(-7px);
  }
  64% {
    transform: scale(1, 1) translateY(0)
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

body {
  background: linear-gradient(191deg, #3a22bd, #ea2b0b);
  background-size: 400% 400%;
  height: 100vh;
  overflow: hidden;
  -webkit-animation: Colors 4s ease infinite;
  -moz-animation: Colors 4s ease infinite;
  -o-animation: Colors 4s ease infinite;
  animation: Colors 4s ease infinite;
}

@-webkit-keyframes Colors {
  0% {
    background-position: 0% 52%
  }
  50% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

@-moz-keyframes Colors {
  0% {
    background-position: 0% 52%
  }
  50% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

@-o-keyframes Colors {
  0% {
    background-position: 0% 52%
  }
  50% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

@keyframes Colors {
  0% {
    background-position: 0% 52%
  }
  50% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

<div id='container'>
  <div id='oboing'>
    <span id='counter'>0</span>
  </div>
</div>

希望这能帮您解决问题！ :)

CSS3 动画完成后增加文本

CSS3 Increment Text After Animation Complete

html

css

css-animations

css-counter