<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div>

.container { -webkit-animation: bgcolor 20s infinite; animation: bgcolor 10s infinite; -webkit-animation-direction: alternate; animation-direction: alternate; height:200px; } @keyframes bgcolor { 0% { background-color: #45a3e5 } 30% { background-color: #66bf39 } 60% { background-color: #eb670f } 90% { background-color: #f35 } 100% { background-color: #864cbf } }