动画完成后的 CSS3 增量文本

问题描述

我是 CSS 动画的新手，所以我做了这个小项目，其中有一个盒子在弹跳，看起来很真实。我希望框内的文本（一开始它只是一个 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 等...

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

解决方法

By it's definition，counter-increment 是一个非 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>

希望这可以为您解决问题！ :)