JSFiddle - React, Tailwind, and code Playground
by saomocari
HTML
<p>example</p>
CSS
p{
font-size:10px;
margin:20px;
padding:10px;
-webkit-animation: example 6s linear -2s infinite alternate;
-moz-animation: example 6s linear -2s infinite alternate;
-o-animation: example 6s linear -2s infinite alternate;
}
@-webkit-keyframes example {
0% {
width:20px;
height:20px;
background-color:#817787;
}
25% {
width:40px;
height:40px;
background-color:#BDAEC5;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
50% {
width:60px;
height:60px;
background-color:#D5C5DE;
-moz-border-radius:0;
-webkit-border-radius: 0;
border-radius: 0;
}
75% {
width:80px;
height:80px;
background-color:#E8D7F1;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
100%{
width:100px;
height:100px;
background-color:#F4E2FE;
-moz-border-radius:0;
-webkit-border-radius: 0;
border-radius: 0;
}
}
@-moz-keyframes example {
0% {
width:20px;
height:20px;
background-color:#817787;
}
25% {
width:40px;
height:40px;
background-color:#BDAEC5;
border-radius: 50%;
}
50% {
width:60px;
height:60px;
background-color:#D5C5DE;
border-radius: 0;
}
75% {
width:80px;
height:80px;
background-color:#E8D7F1;
border-radius: 50%;
}
100%{
width:100px;
height:100px;
background-color:#F4E2FE;
border-radius: 0;
}
}
@-moz-keyframes example {
0% {
width:20px;
height:20px;
background-color:#817787;
}
...