JSFiddle - React, Tailwind, and code Playground
CSS
div { width: 129px; height: 129px; border: 1px solid; margin-left:100px;
-webkit-animation: kf_springsInto 1s 2s forwards cubic-bezier(0.315, 0.870, 0.595, 0.970);
-moz-animation: kf_springsInto 1s 2s forwards cubic-bezier(0.315, 0.870, 0.595, 0.970);
-o-animation: kf_springsInto 1s 2s forwards cubic-bezier(0.315, 0.870, 0.595, 0.970);
animation: kf_springsInto 1s 2s forwards cubic-bezier(0.315, 0.870, 0.595, 0.970);
}
@-webkit-keyframes kf_springsInto {
0% { opacity: 0; -webkit-transform: translateX(-200px) rotate(-360deg) scale(0); }
100% { opacity: 1; -webkit-transform: translateX(0) rotate(0deg) scale(1);}
}
@-moz-keyframes kf_springsInto {
0% { opacity: 0; -moz-transform: translateX(-200px) rotate(-360deg) scale(0);;}
100% { opacity: 1; -moz-transform: translateX(0) rotate(0deg) scale(1);}
}
@-o-keyframes kf_springsInto {
0% { opacity: 0; -o-transform: translateX(-200px) rotate(-360deg) scale(0);;}
100% { opacity: 1; -o-transform: translateX(0) rotate(0deg) scale(1);}
}
@keyframes kf_springsInto {
0% { opacity: 0; transform: translateX(-200px) rotate(-360deg) scale(0);;}
100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1);}
}