Some CSS animation

by Julien Roche

HTML

<div class="element">An element</div>

CSS

body {
  margin: 5rem;
}

.element {
  background-color: orange;
  color: black;
  height: 75px;
  line-height: 75px;
  text-align: center;
  width: 150px;
}

.element--animate {
  animation: debounce 1s ease-in-out 0s 1 running;
}

@keyframes debounce {
  0% {
    transform: translateY(4rem);
  }
  
  20% {
    transform: translateY(0rem);
  }
  
  40% {
    transform: translateY(3rem);
  }
  
  60% {
    transform: translateY(0rem);
  }
  
  70% {
    transform: translateY(2rem);
  }
  
  80% {
    transform: translateY(0rem);
  }
  
  90% {
    transform: translateY(1rem);
  }
}

Babel + JSX

const element = document.querySelector('.element');

function animate() {
	setTimeout(() => {
  	element.classList.add('element--animate');
    
    setTimeout(() => {
      element.classList.remove('element--animate');
      animate();
    }, 3000);  
  }, 1000);  
}

animate();