JSFiddle - React, Tailwind, and code Playground
by dirtyd77
HTML
<div id="div1">
Yay for CSS3
</div>
CSS
@-webkit-keyframes doSomething{
0% {
background: red;
}
25%{
background: yellow;
box-shadow: 0 0 4px 2px red;
-webkit-transform: scale(1.1) rotate(4deg) translate(1em);
}
50% {
background: blue;
box-shadow: 0 0 8px 4px orange;
opacity: 0.25;
-webkit-transform: scale(1.5) rotate(15deg) translate(.5em, -.5em);
}
100% {
background: green;
box-shadow: 0 0 16px 6px orange;
-webkit-transform: scale(0.5) rotate(0deg) translate(0em, -30em);
}
}
#div1{
position: absolute;
top: 50%;
-webkit-animation: doSomething 3s infinite alternate;
}