Spring Physics in Pure CSS

#linear()linear-easing

Use linear() easing curves for spring-like motion.

live_demo

code

@keyframes bounce-ball {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 -100px;
  }
  100% {
    translate: 0 0;
  }
}

.ball-ease {
  animation: bounce-ball 1.5s ease infinite;
}

.ball-spring {
  animation: bounce-ball 1.5s linear(0, 0.007 0.7%, 0.028 1.4%, ... 1) infinite;
}