<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)
}
}
