Bounce In Right is a bounce in CSS keyframe animation with 4 keyframe steps (0% → 60% → 80% → 100%). It animates transform (translateX, scale) and opacity. The element starts invisible and fades in to full opacity.
Bounce In animations bring the element on screen with an overshoot and settle. They are lively entrances for buttons, alerts, badges and onboarding steps.
Animation shorthand
.element {
animation: bounce-in-right 1s ease 0s 1 normal forwards;
}@keyframes code
@keyframes bounce-in-right {
0% { opacity: 0; transform: translateX(600px) scale(.7); }
60% { opacity: 1; transform: translateX(-25px) scale(1.02); }
80% { transform: translateX(8px); }
100% { transform: translateX(0) scale(1); }
}HTML
<div class="element">Animated content</div>Keyframe steps
| Step | Styles |
|---|---|
| 0% | opacity: 0; transform: translateX(600px) scale(.7); |
| 60% | opacity: 1; transform: translateX(-25px) scale(1.02); |
| 80% | transform: translateX(8px); |
| 100% | transform: translateX(0) scale(1); |
Respect reduced motion
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}More Bounce In animations
Frequently Asked Questions
Copy the @keyframes bounce-in-right block and the animation shorthand into your stylesheet, then add the class to any element. The shorthand reads name, duration, timing function, delay, iteration count, direction and fill mode.
Yes. Change the second value in the shorthand, for example 2s for a slower animation, or use the settings above the code to try duration, timing, delay, repeat count, direction and fill mode and copy the updated CSS.
Keep the iteration count at 1 and add the animation class to the element in your HTML. It plays once as soon as the element is rendered; use forwards or both to keep the end state.
Yes. It only animates transform and opacity, which browsers can hand to the GPU, so it stays smooth even on mobile devices.