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;
}