h1 Spring<br>Animation
View Compiled
@import url(https://fonts.googleapis.com/css?family=Lobster);

@function spring-wobbly($t) {
	@return -0.5 * pow(2.71828, (-6 * $t)) * (-2 * pow(2.71828, (6 * $t)) + sin(12 * $t) + 2 * cos(12 * $t))
}
  body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: white;
  color: #B61A44;
}
h1{
  text-align: center;
  font-family: Lobster, sans-serif;
  font-size: 10vw;
  animation: 5s wobble linear infinite;
}

@keyframes wobble {
  @for $i from 0 through 100 {
    #{$i * 1%} {
      transform: scale(spring-wobbly($i / 30),spring-wobbly($i / 20)); 
    }
  }
  0% {
      opacity: 1;
    }
  50%{
      opacity: 1;
    }
  90%{
      opacity: 0;
    }
  100%{
      opacity: 0;
    }
}
// form https://medium.com/@dtinth/spring-animation-in-css-2039de6e1a03#.6t0n5lx2s
// https://github.com/terkel/mathsass

External CSS

  1. https://www.w3cplus.com/default/files/blogs/2016/1604/mathsass/math

External JavaScript

This Pen doesn't use any external JavaScript resources.