JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

Execute no chrome e depois no safari:
<ul class="tools finish-animation">
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
   <li><a href="#">link 2</a></li>              
</ul>

CSS

ul.tools li {
   float: left;
   padding: 6px;
   list-style:none;
   font-family: sans-serif;
 }
 
 ul.tools.finish-animation {
            display: block;
            animation: downBumble 700ms;
            -moz-animation: downBumble 700ms; /* Firefox */
            -webkit-animation: downBumble 700ms; /* Safari and Chrome */
            -o-animation: downBumble 700ms; /* Opera */
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            will-change: transform;
            
          }

@keyframes downBumble {
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  60% {
    transform: translate3d(0px, -15px, 0px);
    -webkit-transform: translate3d(0px, -15px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

}
@-moz-keyframes downBumble { /* Firefox */
  20%, 50%, 80%, 100% {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  0% {
    transform: translate3d(0px, -90px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  40% {
    transform: translate3d(0px, -30px, 0px);
    -webkit-transform: translate3d(0px, -30px, 0px);
    transform-style: preserve-3d;
   ...