JSFiddle - React, Tailwind, and code Playground
HTML
<div id="lt"><</div>
CSS
#lt {
display: inline-block;
vertical-align: bottom;
font: normal 15em/300px sans-serif;
color: #333;
opacity: 0;
-webkit-transform: scale(4);
-moz-transform: scale(4);
-ms-transform: scale(4);
-o-transform: scale(4);
transform: scale(4);
-webkit-animation: fadeInStamp .5s linear 1 normal both;
-moz-animation: fadeInStamp .5s linear 1 normal both;
-ms-animation: fadeInStamp .5s linear 1 normal both;
-o-animation: fadeInStamp .5s linear 1 normal both;
animation: fadeInStamp .5s linear 1 normal both;
/*
-webkit-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
-moz-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
-ms-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
-o-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
animation: leftArrowBounce .5s linear 1.5s 1 normal both;
*/
}
/*
****************************************
------- fadeInStamp keyframes
****************************************
*/
@-webkit-keyframes fadeInStamp {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
-webkit-transform: scale(.7);
-moz-transform: scale(.7);
-ms-transform: scale(.7);
-o-transform: scale(.7);
transform: scale(.7);
}
80% {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes fadeInStamp {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
-webkit-transform: scale(.7);
-moz-transform: scale(.7);
-ms-transform:...