JSFiddle - React, Tailwind, and code Playground
HTML
<div class="animated-box">Animated box</div>
CSS
.animated-box {
border:2px solid #bada55;
border-radius: 10px 0;
color: #bada55;
font-size: 20px;
line-height:20px;
font-weight:bold;
text-align:center;
padding:50px;
width:200px;
-webkit-animation:fontbulger 4s infinite;
-moz-animation: fontbulger 4s infinite;
-o-animation: fontbulger 4s infinite;
animation: fontbulger 4s infinite;
}
@-webkit-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
@-moz-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
@-o-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
@keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}