JSFiddle - React, Tailwind, and code Playground

by krish reddy

HTML

<div class="container">
    <div class="something">
    </div>
</div>

CSS

.container{
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background-color: #777;
    position: relative;
}
    .container div{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #49c8ff;
    margin: 0 auto;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 35%;
    }

/* This is the animation code. */
@-webkit-keyframes example {
   from { transform: scale(2.0); }
   to   { transform: scale(1.0); }
}

/* This is the element that we apply the animation to. */
div.something {
   -webkit-animation-name: example;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease; /* ease is the default */
   -webkit-animation-delay: 1s;             /* 0 is the default */
   -webkit-animation-iteration-count: 5;    /* 1 is the default */
   -webkit-animation-direction: alternate;  /* normal is the default */
}