JSFiddle - React, Tailwind, and code Playground

by alsadi

HTML

This is about how to use CSS3 animation
<div class="cont">
    <input type="text" value="search">
    <div class="arrow bounce">^^^</div>
</div>

CSS

.cont {
    position: relative;
    height:2em;
}
.cont input {
    height: 1em;
    position: absolute;
    top:0;
}
.arrow {
    position: absolute;
    top:1em;
}

.bounce {
 -webkit-animation-name: bounce;
 -moz-animation-name: bounce;
 -webkit-animation-duration: 0.5s;
 -moz-animation-duration: 0.5s;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -moz-animation-direction: alternate;
 -webkit-animation-timing-function: eaze-in-out;
 -moz-animation-timing-function: eaze-in-out;
 }
 
 
 @-webkit-keyframes bounce {
  from { top: 1em; }
  to { top: 2em; }
 }

@-moz-keyframes bounce {
  from { top: 1em; }
  to { top: 2em; }
}