CSS counter effect

Question

On twitter, when a tweet gains likes/retweets theres a neat animation for the number going up. I found a similar effect for CSS but it uses a really strange method:

div {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  overflow: hidden;
}
div:after {
  content: attr(data-val);
  position: absolute;
  top: 0;
  left: 0;
  line-height: 20px;
  text-align: center;
  -webkit-animation: loop 10s linear;
  animation: loop 10s linear;
}
@-webkit-keyframes loop {
  0% { margin-top: 0px; }
  9% { margin-top: 0px; }
  10% { margin-top: -20px; }
  19% { margin-top: -20px; }
  20% { margin-top: -40px; }
  29% { margin-top: -40px; }
  30% { margin-top: -60px; }
  39% { margin-top: -60px; }
  40% { margin-top: -80px; }
  49% { margin-top: -80px; }
  50% { margin-top: -100px; }
  59% { margin-top: -100px; }
  60% { margin-top: -120px; }
  69% { margin-top: -120px; }
  70% { margin-top: -140px; }
  79% { margin-top: -140px; }
  80% { margin-top: -160px; }
  89% { margin-top: -160px; }
  90% { margin-top: -180px; }
  99% { margin-top: -180px; }
  100% { margin-top: -200px; }
}
@keyframes loop {
  0% { margin-top: 0px; }
  9% { margin-top: 0px; }
  10% { margin-top: -20px; }
  19% { margin-top: -20px; }
  20% { margin-top: -40px; }
  29% { margin-top: -40px; }
  30% { margin-top: -60px; }
  39% { margin-top: -60px; }
  40% { margin-top: -80px; }
  49% { margin-top: -80px; }
  50% { margin-top: -100px; }
  59% { margin-top: -100px; }
  60% { margin-top: -120px; }
  69% { margin-top: -120px; }
  70% { margin-top: -140px; }
  79% { margin-top: -140px; }
  80% { margin-top: -160px; }
  89% { margin-top: -160px; }
  90% { margin-top: -180px; }
  99% { margin-top: -180px; }
  100% { margin-top: -200px; }
}

<div class="loop" data-val="0 10 20 30 40 50 60 70 80 90"></div>

This method is really difficult to incorporate into my project. I was wondering if anyone knew a better solution for something where I don't necessarily know what the added number will be...

$('.add').on("click", function() {
  
  
  let numb = $('.numb');
  let rand = Math.floor(Math.random() * 6);
  
  numb.text(parseInt(numb.text()) + rand)

});

.numb {
 padding: 12px 0;
 font-size: 26px;
 font-family: Arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numb">5</div>
<button class="add">Add to number</button>

Would anyone know a good alternative to create the same effect?

Answer 1

The effect is possible by toggling a class, what i did is use translateY to make the last number always visible, when i add another div, switch to another class that makes the second last number visible, then remove that class.

function createNum() {
		  let numb = document.querySelector(".numb_list");
		  let rand = Math.floor(Math.random() * 6);
		  let newNum = document.createElement("div");
		  newNum.innerText = rand;
		  numb.classList.toggle("switch");
		  numb.appendChild(newNum);
		  setTimeout(function() {
		  	numb.classList.toggle("switch");
		  },1)
		}

.numb_container {
	height: 21px;
	overflow: hidden;
}

.numb_list {
    transform: translateY(calc(-100% + 21px));
    transition: transform 0.2s linear;
}

.switch {
	transform: translateY(calc(-100% + 42px));
	transition: none;
}

<div class="numb_container">
	<div class="numb_list">
		<div>1</div>
	</div>
</div>
<button class="add" onclick="createNum()">Add to number</button>