By Benjamin De Cock - stripe.com - https://www.youtube.com/watch?v=J6wUmQDQBkw

Some effects

// Example 1
.arrow {
  animation: bounce 1s linear infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: none;
    /* ease-out cubic */
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  50% {
    transform: translateX(20px);
    /* ease-in cubic */
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
}


// Example 2
<label>
  <input type="checkbox">Remember me</input>
</label>

<label id="phone">
  Please enter your phone number:
  <input type="tel">
</label>

#phone {
  transform: perspective(500px) rotateX(-.25turn);
  transform-origin: 50% 0;
  transition: .4s;
}

#phone.active {
  transform: none;
}