"Animate Function"
Bootstrap 4.0.0 Snippet by sumi9xm

<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"> <li class="ball slide-left"></li> <li class="ball bounceIn"></li> <li class="ball bounce"></li> <li class="ball bouncedelay"></li> <li class="ball "></li> </div> </div>
.ball{ width:50px; height:50px; background-color:red; border-radius:50px; margin-top:50px; display:block; margin:20px; clear:both; } .slide-left{ opacity:0; -webkit-animation:slidein 1s 5s infinite; animation:slidein 1s 5s infinite; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } @-webkit-keyframes slidein { 0% { opacity:0; -webkit-transform:translateX(40px); transform:translateX(40px) } to { opacity:1; -webkit-transform:translateX(50); transform:translateX(50) } } @keyframes slidein { 0% { opacity:0; -webkit-transform:translateX(10px); transform:translateX(10px) } to { opacity:1; -webkit-transform:translateX(200); transform:translateX(200) } } .bounceIn{ opacity: 0; animation-name: bounceIn; animation-duration: 1945ms; animation-timing-function: linear; animation-fill-mode: forwards; animation-delay: 4s; animation-iteration-count: infinite; } @keyframes bounceIn{ 0%{ opacity: 0; transform: scale(0.3) translate3d(0,0,0); } 50%{ opacity: 0.9; transform: scale(1.1); } 80%{ opacity: 1; transform: scale(0.89); } 100%{ opacity: 1; transform: scale(1) translate3d(0,0,0); } } .bounce { -moz-animation: bounce 3s infinite; -webkit-animation: bounce 3s infinite; animation: bounce 3s infinite; -webkit-animation-delay:2s; animation-delay:2s } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); transform: translateY(-15px); } } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px); } } .bouncedelay { animation: bouncedelay 14s infinite cubic-bezier(0.85, 0.04, 0, 1.35) both; } .bouncedelay{ -webkit-animation-delay:1s; animation-delay:1s } @-webkit-keyframes bouncedelay{ 0%, 80%, 100%{ -webkit-transform:scale(0) } 40%{ -webkit-transform:scale(1) } } @keyframes bouncedelay{ 0%, 80%, 100%{ -webkit-transform:scale(0); transform:scale(0) } 40%{ transform:scale(1); -webkit-transform:scale(1) } }

Related: See More


Questions / Comments: