I needed to implement infinite bounce effect using pure CSS, so I referred this site and ended up doing this.
.animated {_x000D_
-webkit-animation-duration: 2.5s;_x000D_
animation-duration: 2.5s;_x000D_
-webkit-animation-fill-mode: both;_x000D_
animation-fill-mode: both;_x000D_
-webkit-animation-timing-function: linear;_x000D_
animation-timing-function: linear;_x000D_
animation-iteration-count: infinite;_x000D_
-webkit-animation-iteration-count: infinite;_x000D_
} _x000D_
_x000D_
@-webkit-keyframes bounce {_x000D_
0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}_x000D_
50% {-webkit-transform: translateY(-5px);}_x000D_
} _x000D_
_x000D_
@keyframes bounce { _x000D_
0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}_x000D_
50% {transform: translateY(-5px);}_x000D_
} _x000D_
_x000D_
.bounce { _x000D_
-webkit-animation-name: bounce;_x000D_
animation-name: bounce;_x000D_
}_x000D_
_x000D_
#animated-example {_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
background-color: red;_x000D_
position: relative;_x000D_
top: 100px;_x000D_
left: 100px;_x000D_
border-radius: 50%;_x000D_
}_x000D_
_x000D_
hr {_x000D_
position: relative;_x000D_
top: 92px;_x000D_
left: -300px;_x000D_
width: 200px;_x000D_
}<div id="animated-example" class="animated bounce"></div>_x000D_
<hr>Now, my only problem is the bouncing element takes a longer rest before it starts bouncing again. How can I make it bounce smoothly just like the bounce effect we get by using jQuery.animate?
This question is related to
css
css-animations
Here is code not using the percentage in the keyframes. Because you used percentages the animation does nothing a long time.
How does this example work:
animation. This is a short hand for animation properties.from and to in the keyframes. from is = 0% and to is = 100%animation: bounce 1s infinite alternate; the 1s is how long the animation will last..ball {_x000D_
margin-top: 50px;_x000D_
border-radius: 50%;_x000D_
width: 50px;_x000D_
height: 50px;_x000D_
background-color: cornflowerblue;_x000D_
border: 2px solid #999;_x000D_
animation: bounce 1s infinite alternate;_x000D_
-webkit-animation: bounce 1s infinite alternate;_x000D_
}_x000D_
@keyframes bounce {_x000D_
from {_x000D_
transform: translateY(0px);_x000D_
}_x000D_
to {_x000D_
transform: translateY(-15px);_x000D_
}_x000D_
}_x000D_
@-webkit-keyframes bounce {_x000D_
from {_x000D_
transform: translateY(0px);_x000D_
}_x000D_
to {_x000D_
transform: translateY(-15px);_x000D_
}_x000D_
}<div class="ball"></div>In case you're already using the transform property for positioning your element (as I currently am), you can also animate the top margin:
.ball {
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
from {
margin-top: 0;
}
to {
margin-top: -15px;
}
}
Source: Stackoverflow.com