Examples of UI animations using css @keyframes with code (No library required)
by Yaron Elharar (@YaronElharar)
In this page, we will go over CSS frame animations for buttons, including animations like slide in, fade, bounce, flash, pulse, rubber, shake, and many others. The examples here are practical code snippets that show how each animation visually looks on a button. We will list the examples, including the name and type of animation, what it does, and the code snippet necessary to activate it. In addition, we’ll provide a few examples of multi-step animations in UI buttons using pure CSS.
Let’s get to it
Examples
Basic Button Animations Example
Fade In Animation
This animation gradually increases the opacity of an element, making it appear to fade into view.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fadeIn { animation: fadeIn 2s infinite; }
Fade Out Animation
This animation gradually decreases the opacity of an element, making it disappear from view.
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.fadeOut { animation: fadeOut 2s infinite; }
Pulse Animation
The pulse animation makes an element grow and shrink repeatedly.
@keyframes pulse {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.pulse {
animation: pulse 2s infinite;
}
Flash Animation
The flash animation makes an element repeatedly fade in and out.
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
.flash {
animation: flash 2s infinite;
}
Button Entry Animations Example
Fade In Down Animation
The element starts small and invisible, then rapidly grows and shrinks a few times before settling at its normal size.
@keyframes fadeInDown {
from { opacity: 0; transform: translate3d(0, -100%, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInDown { animation: fadeInDown 2s infinite; }
Fade In Up Animation
The element fades into view while moving upwards from its starting position.
@keyframes fadeInUp {
from { opacity: 0; transform: translate3d(0, 100%, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInUp { animation: fadeInUp 2s infinite; }
Fade In Left Animation
The element fades into view while moving leftwards from a position right of its final location.
@keyframes fadeInLeft {
from { opacity: 0; transform: translate3d(-100%, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInLeft { animation: fadeInLeft 2s infinite; }
Fade In Right Animation
The element fades into view while moving rightwards from a position left of its final location.
@keyframes fadeInRight {
from { opacity: 0; transform: translate3d(100%, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInRight { animation: fadeInRight 2s infinite; }
Bounce In Animation
The element starts small and invisible, then rapidly grows and shrinks a few times before settling at its normal size.
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
20% { transform: scale3d(1.1, 1.1, 1.1); }
40% { transform: scale3d(0.9, 0.9, 0.9); }
60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
80% { transform: scale3d(0.97, 0.97, 0.97); }
to { opacity: 1; transform: scale3d(1, 1, 1); }
}
.bounceIn { animation: bounceIn 2s infinite; }
Button Exit Animations Example
Fade Out Down Animation
The element fades out of view while moving downwards from its starting position.
@keyframes fadeOutDown {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(0, 100%, 0); }
}
.fadeOutDown { animation: fadeOutDown 2s infinite; }
Fade Out Up Animation
The element fades out of view while moving upwards from its starting position.
@keyframes fadeOutUp {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(0, -100%, 0); }
}
.fadeOutUp { animation: fadeOutUp 2s infinite; }
Fade Out Right Animation
The element fades out of view while moving rightwards from its starting position.
@keyframes fadeOutRight {
from { opacity: 1; }
to { opacity: 0; transform: translate3d(100%, 0, 0); }
}
.fadeOutRight { animation: fadeOutRight 2s infinite; }
Fade Out Left Animation
The element fades out of view while moving leftwards from its starting position.
@keyframes fadeOutLeft{
from { opacity: 1; }
to { opacity: 0; transform: translate3d(-100%, 0, 0); }
}
.fadeOutLeft{ animation: fadeOutLeft 2s infinite; }
Bounce Out Animation
The element starts at its normal size, slightly shrinks, then expands before rapidly shrinking and fading out.
@keyframes bounceOut {
20% { transform: scale3d(0.9, 0.9, 0.9); }
50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
}
.bounceOut { animation: bounceOut 2s infinite; }
Attention Seeker Buttons Animations Example
Bounce Animation
The bounce animation makes an element bounce up and down.
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.bounce {
animation: bounce 2s infinite;
}
ShakeX Animation
The shakeX animation makes an element shake horizontally.
@keyframes shakeX {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shakeX {
animation: shakeX 2s infinite;
}
ShakeY Animation
The shakeY animation makes an element shake vertically.
@keyframes shakeY {
0%, 100% {transform: translateY(0);}
10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);}
20%, 40%, 60%, 80% {transform: translateY(10px);}
}
.shakeY {
animation: shakeY 2s infinite;
}
Tada Animation
The tada animation creates a celebratory effect with scaling and rotating.
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}
.tada {
animation: tada 2s infinite;
}
Wobble Animation
The wobble animation creates a side-to-side wobbling effect.
@keyframes wobble {
0% {transform: translateX(0%);}
15% {transform: translateX(-25%) rotate(-5deg);}
30% {transform: translateX(20%) rotate(3deg);}
45% {transform: translateX(-15%) rotate(-3deg);}
60% {transform: translateX(10%) rotate(2deg);}
75% {transform: translateX(-5%) rotate(-1deg);}
100% {transform: translateX(0%);}
}
.wobble {
animation: wobble 2s infinite;
}
Playful Buttons Animations Example
Jello Animation
The jello animation creates a gelatin-like effect by skewing the element.
@keyframes jello {
0%, 11.1%, 100% {transform: none;}
22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);}
33.3% {transform: skewX(6.25deg) skewY(6.25deg);}
44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);}
55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);}
66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);}
77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);}
88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}
.jello {
animation: jello 2s infinite;
}
Rubber Band Animation
The rubberBand animation stretches and squashes an element, creating a rubber-like effect.
@keyframes rubberBand {
0% {transform: scale(1);}
30% {transform: scaleX(1.25) scaleY(0.75);}
40% {transform: scaleX(0.75) scaleY(1.25);}
60% {transform: scaleX(1.15) scaleY(0.85);}
100% {transform: scale(1);}
}
.rubberBand {
animation: rubberBand 2s infinite;
}
Swing Animation
The swing animation makes an element swing back and forth, as if hanging from a pivot point.
@keyframes swing {
20% {transform: rotate(15deg);}
40% {transform: rotate(-10deg);}
60% {transform: rotate(5deg);}
80% {transform: rotate(-5deg);}
100% {transform: rotate(0deg);}
}
.swing {
transform-origin: top center;
animation: swing 2s infinite;
}
How to implement these CSS codes
How to implement these animations on a button?
For CSS animations to work, they need to have two properties: the keyframe, which is the definition of how the animation moves, and the animation property, which defines how much time the animation should run, the delay before the animation starts, etc. Above in the examples, you’ll see the animation keyframes (@keyframes); you can copy those directly to your CSS. The second part you’ll need is the animation property, which you place in a particular element selector.
If you want to expand your knowledge about the subject, I left direct links that expand on each subject:
- @keyframes (external link)
- animation (external link)
- CSS selectors (external link)
But if you want to get straight to the point, let’s get to it
Here’s a bare-bones HTML file structure with an example animation. Technically, you can copy this into a text file and rename it to myAnimation.html; double-click it, and it will run the animation. Let’s focus on the relevant components of the animation.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.animation-box {
padding: 12px 34px;
background-color: #3498db;
display: flex;
color: white;
font-weight: bold;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.background_of_animation {
background-color: #062036;
width: 100%;
height: 280px;
padding: 32px;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fadeIn { animation: fadeIn 2s infinite; }
</style>
</head>
<body>
<div class="background_of_animation">
<div class="animation-box fadeIn">BUTTON</div>
</div>
</body>
</html>
This is the section of the code dedicated to the animations themselves. And when you need an animation you can just copy one of them into your CSS
...
...
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fadeIn { animation: fadeIn 2s infinite; }
...
...
This is the selector section of the animation, where you can see that it has an animation class of fadeIn. You can switch this class selector to any other type of animation you would like to use.
The animation property has multiple values you can change and adjust to your needs, If you don’t define one of the animation values it will use its default animation value.
// Animation values are optional, separate the values by using a space between them/ animation: duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name // multiple consecutive animations, you separate the animations by using a comma between animations. animation: (Animation1), (Animation2), (Animation3) // example of multiple animations. animation: 2s forwards fadeIn, animation: 2s 4s bounce;
Default values, If a animation shorthand value is not defined, it defaults to these values.
- animation-name: none
- animation-duration: 0s (when not defined, you won’t see the animation moving)
- animation-timing-function: ease
- animation-delay: 0s
- animation-iteration-count: 1
- animation-direction: normal
- animation-fill-mode: none
- animation-play-state: running
- animation-timeline: auto
...
...
<div class="animation-box fadeIn">BUTTON</div>
...
...
Time to use the button animations above on your own buttons. Just copy and paste the code and refine the properties, Remember that for the CSS animation to work on your button, you have 3 things that need to be true. One is the animation itself which is defined in @keyframes, and second selector that is connected to that animation needs to exist and be placed on the element that need to be animated.