<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> Animatition Box Effects </div> <p> Animatition Box Effects</p>

HTML CSS Result Edit on @keyframes blink { 0% { background: violet; } 14.3% { background: indigo; } 28.6% { background: blue; } 42.9% { background: green; } 57.2% { background: yellow; } 71.5% { background: orange; } 85.8% { background: red; } 100% { background: violet; } } @-webkit-keyframes blink { 0% { background: violet; } 14.3% { background: indigo; } 28.6% { background: blue; } 42.9% { background: green; } 57.2% { background: yellow; } 71.5% { background: orange; } 85.8% { background: red; } 100% { background: violet; } } div { height: 300px; width: 300px; border: 1px solid black; animation: blink 20s linear infinite; -webkit-animation: blink 20s linear infinite; }