Home/Blog/CSS Keyframes Examples

Blog

Examples of UI Animations Using CSS @keyframes with Code (No Library Required)

Written by Yaron Elharar (@YaronElharar) · Updated April 30, 2026

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

Basic Button Animations Example

Fade In Animation

This animation gradually increases the opacity of an element, making it appear to fade into view.

CSS

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fadeIn { animation: fadeIn 1.2s infinite; }

Fade Out Animation

This animation gradually decreases the opacity of an element, making it disappear from view.

CSS

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.fadeOut { animation: fadeOut 1.2s infinite; }

Pulse Animation

The pulse animation makes an element grow and shrink repeatedly.

CSS

@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}
.pulse {
    animation: pulse 1.2s infinite;
}

Flash Animation

The flash animation makes an element repeatedly fade in and out.

CSS

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
.flash {
    animation: flash 1.2s infinite;
}

Button Entry Animations Example

Fade In Down Animation

The element fades into view while moving downward from its starting position.

CSS

@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInDown { animation: fadeInDown 1.1s infinite; }

Fade In Up Animation

The element fades into view while moving upwards from its starting position.

CSS

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInUp { animation: fadeInUp 1.1s infinite; }

Fade In Left Animation

The element fades into view while moving in from the left.

CSS

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInLeft { animation: fadeInLeft 1.1s infinite; }

Fade In Right Animation

The element fades into view while moving in from the right.

CSS

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInRight { animation: fadeInRight 1.1s infinite; }

Bounce In Animation

The element starts small and invisible, then rapidly grows and shrinks a few times before settling at its normal size.

CSS

@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 1.1s infinite; }

Button Exit Animations Example

Fade Out Down Animation

The element fades out of view while moving downwards from its starting position.

CSS

@keyframes fadeOutDown {
    from { opacity: 1; }
    to { opacity: 0; transform: translate3d(0, 100%, 0); }
}
.fadeOutDown { animation: fadeOutDown 1.05s infinite; }

Fade Out Up Animation

The element fades out of view while moving upwards from its starting position.

CSS

@keyframes fadeOutUp {
    from { opacity: 1; }
    to { opacity: 0; transform: translate3d(0, -100%, 0); }
}
.fadeOutUp { animation: fadeOutUp 1.05s infinite; }

Fade Out Right Animation

The element fades out of view while moving rightwards from its starting position.

CSS

@keyframes fadeOutRight {
    from { opacity: 1; }
    to { opacity: 0; transform: translate3d(100%, 0, 0); }
}
.fadeOutRight { animation: fadeOutRight 1.05s infinite; }

Fade Out Left Animation

The element fades out of view while moving leftwards from its starting position.

CSS

@keyframes fadeOutLeft{
    from { opacity: 1; }
    to { opacity: 0; transform: translate3d(-100%, 0, 0); }
}
.fadeOutLeft{ animation: fadeOutLeft 1.05s infinite; }

Bounce Out Animation

The element starts at its normal size, slightly shrinks, then expands before rapidly shrinking and fading out.

CSS

@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 1.05s infinite; }

Attention Seeker Buttons Animations Example

Bounce Animation

The bounce animation makes an element bounce up and down.

CSS

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}
.bounce {
    animation: bounce 1s infinite;
}

ShakeX Animation

The shakeX animation makes an element shake horizontally.

CSS

@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 1s infinite;
}

ShakeY Animation

The shakeY animation makes an element shake vertically.

CSS

@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 1s infinite;
}

Tada Animation

The tada animation creates a celebratory effect with scaling and rotating.

CSS

@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 1s infinite;
}

Wobble Animation

The wobble animation creates a side-to-side wobbling effect.

CSS

@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 1s infinite;
}

Playful Buttons Animations Example

Jello Animation

The jello animation creates a gelatin-like effect by skewing the element.

CSS

@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 1.05s infinite;
}

Rubber Band Animation

The rubberBand animation stretches and squashes an element, creating a rubber-like effect.

CSS

@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 1.05s infinite;
}

Swing Animation

The swing animation makes an element swing back and forth, as if hanging from a pivot point.

CSS

@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 1.05s 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.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .animation-box {
            padding: 12px 34px;
            background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
            display: flex;
            color: #1c1917;
            font-weight: 800;
            justify-content: center;
            align-items: center;
            border-radius: 999px;
            letter-spacing: 0.08em;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fadeIn { animation: fadeIn 1.2s infinite; }
    </style>
</head>
<body>
    <div class="animation-box fadeIn">BUTTON</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

CSS

...
    ...
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .fadeIn { animation: fadeIn 1.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.

CSS

/* Animation values are optional. Separate them with spaces. */
animation: duration easing-function delay iteration-count direction fill-mode play-state name;

/* Multiple animations are separated with commas. */
animation: (Animation1), (Animation2), (Animation3);

/* Example of multiple animations. */
animation: 1.2s forwards fadeIn, 1s 2.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