JSFiddle - React, Tailwind, and code Playground

by Adhik Bagul

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="alert alert-success flashit">Alert</div>

CSS

body {

    color:#FFF;
    text-align:center;
}
/* Flash class and keyframe animation */


 .flashit {
    -webkit-animation: flash linear 1s infinite;
    animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .1;
    }
    100% {
        opacity: 1;
    }
}
/* Pulse class and keyframe animation */
 .pulseit {
    -webkit-animation: pulse linear .5s infinite;
    animation: pulse linear .5s infinite;
}
@-webkit-keyframes pulse {
    0% {
        width:200px;
    }
    50% {
        width:240px;
    }
    100% {
        width:200px;
    }
}
@keyframes pulse {
    0% {
        width:200px;
    }
    50% {
        width:240px;
    }
    100% {
        width:200px;
    }
}