CSS Fade Animations With Code Examples | FadeIn, FadeOut, Directional Fade

Contents

  1. FadeIn
  2. FadeOut
  3. FadeInUp
  4. FadeInDown
  5. FadeInLeft
  6. FadeInRight
  7. FadeOutUp
  8. FadeOutDown
  9. FadeOutLeft
  10. FadeOutRight

CSS Fade animations are a popular choice to add smooth appearance and disappearance effects to elements. This guide showcases different types of fade animations using pure CSS, including directional fade-in and fade-out. Each section provides a live preview and the corresponding source code for quick use.

1. Basic Fade Animations fadeIn & fadeOut

The simplest fade animations involve transitioning the opacity of an element. The fadeIn effect makes an element appear smoothly, while fadeOut gradually hides it.

FadeIn Animation

Demo FadeIn
HTML
<div class="demo-text fadeIn">Fade In Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

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

.fadeIn {
    animation: fadeIn 1s ease-in infinite; /* remove infinite*/
}
Run codeTry it yourself

FadeOut Animation

Demo FadeOut
HTML
<div class="demo-text fadeOut">Fade Out Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

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

.fadeOut {
    animation: fadeOut 1s ease-in infinite; /* remove infinite*/
}
Run codeTry it yourself

2. CSS Directional Fade In Animations

These animations combine fading with directional movement. They are ideal for animating elements as they enter from different sides of the screen.

FadeInUp Animation

Demo FadeInUp
HTML
<div class="demo-text fadeInUp">Fade in Up Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    animation: fadeInUp 1s ease-out infinite;
}
Run codeTry it yourself

FadeInDown Animation

Demo FadeInDown Animation
HTML
<div class="demo-text fadeInDown">Fade in Down Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    animation: fadeInDown 1s ease-out infinite;
}
Run codeTry it yourself

FadeInLeft Animation

Demo FadeInLeft Animation
HTML
<div class="demo-text fadeInLeft">Fade in Left Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    animation: fadeInLeft 1s ease-out infinite;
}
Run codeTry it yourself

FadeInRight Animation

Demo FadeInRight Animation
HTML
<div class="demo-text fadeInRight">Fade in Right Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    animation: fadeInRight 1s ease-out infinite;
}
Run codeTry it yourself

3. CSS Directional Fade Out Animations

Similar to directional fade-ins, these animations fade the element out while moving it in a particular direction.

FadeOutUp Animation

Demo fadeOutUp Animation
HTML
<div class="demo-text fadeOutUp">Fade Out Up Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.fadeOutUp {
    animation: fadeOutUp 1s ease-in infinite;
}
Run codeTry it yourself

FadeOutDown Animation

Demo FadeOutDown Animation
HTML
<div class="demo-text fadeOutDown">Fade Out Down Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.fadeOutDown {
    animation: fadeOutDown 1s ease-in infinite;
}
Run codeTry it yourself

FadeOutLeft Animation

Demo FadeOutLeft Animation
HTML
<div class="demo-text fadeOutLeft">Fade Out Left Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}


@keyframes fadeOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

.fadeOutLeft {
    animation: fadeOutLeft 1s ease-in infinite;
}
Run codeTry it yourself

FadeOutRight Animation

Demo fadeOutRight Animation
HTML
<div class="demo-text fadeOutRight">Fade Out Right Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

.fadeOutRight {
    animation: fadeOutRight 1s ease-in infinite;
}
Run codeTry it yourself