More Than 35 CSS3 Animations With HTML5
CSS3

More Than 35 CSS3 Animations With HTML5

More Than 35 CSS3 Animations With HTML5

Elements gradually change from one style to another with the help of animations. CSS3 made the life so easy to give transitions and effects to the elements. You can use thousands of animations with the help of CSS3. CSS3 animations can be easily use in all web languages. Here we’re going to get the source code of some major css animations with the help of CSS3 transition, keyframes and transform properties.


Recommended: Top Eight Reasons of Why Professional Website is Required for Startups or New Business





01 Striking

Huhu CSS3 Animation

/*CSS*/
.hu__hu__ { animation: hu__hu__ infinite 2s ease-in-out }
@keyframes hu__hu__ {
    50% { transform: translateY(30px) }
}
<!--HTML-->
<div class="hu__hu__"> Example </div>

Snake CSS3 Animation

/*CSS*/
.leSnake span { animation: leSnake 1.5s ease-in-out; animation-iteration-count: infinite }
@keyframes leSnake {
    from, to { transform: translateY(0px) }
    50% { transform: translateY(30px) }
}
<!--HTML-->
<div class="leSnake sequence"> Example </div>

Peek CSS3 Animation

        /*CSS*/
        .lePeek span { animation-name: lePeek }
        @keyframes lePeek {
            25% {  transform: rotateX(30deg) translateY(10px) rotate(-13deg); }
            50% { transform: translateY(-22px) rotate(3deg) scale(1.1);  }
        }
        <!--HTML-->
        <div class="lePeek sequence"> Example </div>

3D Effect CSS3 Animation

        /*CSS*/
        .effect3d { animation-name: effect3d }
        @keyframes effect3d {
            to {
                text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15)
            }
        }
        <!--HTML-->
        <div class="effect3d"> Example </div>

Rain Drop CSS3 Animation

        /*CSS*/
        .leRainDrop span { animation-name: leRainDrop; animation-iteration-count: infinite; }
        @keyframes leRainDrop {
            0%, 25%, 55%, 75%, 87%, 97%, 100% { transform: scaleX(1.0) }
            26%, 56%, 76% { transform: scaleX(1.3) scaleY(0.8) }
            31%, 61%, 81% { transform: scaleX(0.8) scaleY(1.2) }
            76%, 88% { transform: scaleX(1.2) }
            98% { transform: scaleX(1.1) }
        }
        <!--HTML-->
        <div class="leRainDrop sequence"> Example </div>

Pe Pe CSS3 Animation

        /*CSS*/
        .pepe { animation-name: pepe; animation-iteration-count: infinite }
        @keyframes pepe {
            from, 33%, 66%, to { transform: rotate(4deg) }
            16%, 50%, 83% { transform: rotate(-4deg) }
        }
        <!--HTML-->
        <div class="pepe"> Example </div>

Water Wave CSS3 Animation

        /*CSS*/
        .leWaterWave span { animation: leWaterWave .2s linear infinite }
        @keyframes leWaterWave {
            50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
        }
        <!--HTML-->
        <div class="leWaterWave sequence"> Example </div>

Lightning CSS3 Animation

        /*CSS*/
        .lightning { animation-name: lightning }
        @keyframes lightning {
            from, 50%, to { opacity: 1 }
            25%, 75% { opacity: 0 }
        }
        <!--HTML-->
        <div class="lightning"> Example </div>

Jolt Zoom CSS3 Animation

        /*CSS*/
        .leJoltZoom span { animation-name: leJoltZoom }
        @keyframes leJoltZoom {
            10% { font-size: 140% }
            40% { font-size: 80% }
            100% { font-size: 100% }
        }
        <!--HTML-->
        <div class="leJoltZoom sequence"> Example </div>

Typing CSS3 Animation

        /*CSS*/
        .typing {
            width: 473px;
            overflow: hidden;
            white-space: nowrap;
            border-right: 2px solid #7E2EA0;
            animation: typing 2s steps(12, end), cursor .2s steps(12, end) infinite;
        }
        @keyframes typing {
            from { width: 0 }
        }
        @keyframes cursor {
            50% { border-color: transparent }
        }
        <!--HTML-->
        <div class="typing"> Example </div>

Electricity CSS3 Animation

        /*CSS*/
        .electricity { animation-name: electricity; animation-iteration-count: infinite }
        @keyframes electricity {
            from, 37%, 67%, 85%, 93% { transform: translateY(30px) }
            4%, 64%, 88% { transform: translateY(10px) }
            8%, 24%, 32%, 44% { transform: translateY(5px) }
            12%, 52%, 60%, 20% { transform: translateY(10px) }
            16%, 40% { transform: translateY(5px) }
            28%, 56% { transform: translateY(10px) }
            48%, 72%, 80%, 96% { transform: translateY(30px) }
            76%, to { transform: translateY(40px) }
        }
        <!--HTML-->
        <div class="electricity"> Example </div>

Wipe CSS3 Animation

        /*CSS*/
        .wipe {
            width: 473px;
            overflow: hidden;
            margin: 0 auto;
            display: inline-flex;
            animation-name: wipe;
        }
        @keyframes wipe {
            to { width: 0 }
        }
        <!--HTML-->
        <div class="wipe"> Example </div>

Open CSS3 Animation

        /*CSS*/
        .open {
            width: 473px;
            margin: 0 auto;
            overflow: hidden;
            display: inline-flex;
            animation-name: open;
        }
        @keyframes open {
            from { width: 0 }
        }
        <!--HTML-->
        <div class="open"> Example </div>

Magnify CSS3 Animation

        /*CSS*/
        .leMagnify span { animation-name: leMagnify }
        @keyframes leMagnify {
            50% {
                transform: scale(1.8);
                letter-spacing: 26px
            }
        }
        <!--HTML-->
        <div class="leMagnify sequence"> Example </div>

Letter Beat CSS3 Animation

        /*CSS*/
        .leBeat span { animation-name: leBeat; }
        @keyframes leBeat {
            14%, 42% { transform: scale(1.3) }
            28%, 70% { transform: scale(1) }
        }
        <!--HTML-->
        <div class="leBeat sequence"> Example </div>


CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate way points.


02 Letter Fade In

Fade In CSS3 Animation

        /*CSS*/
        .leFadeIn span { animation-name: leFadeIn }
        @keyframes leFadeIn {
            from { opacity: 0 }
            to { opacity: 1 }
        }
        <!--HTML-->
        <div class="leFadeIn sequence"> Example </div>

Fade In Left CSS3 Animation

        /*CSS*/
        .leFadeInLeft span { animation-name: leFadeInLeft }
        @keyframes leFadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-60px);
            }
            to { opacity: 1 }
        }
        <!--HTML-->
        <div class="leFadeInLeft sequence"> Example </div>

Fade In Right CSS3 Animation

        /*CSS*/
        .leFadeInRight span { animation-name: leFadeInRight }
        @keyframes leFadeInRight {
            from {
                opacity: 0;
                transform: translateX(60px);
            }
            to { opacity: 1 }
        }
        <!--HTML-->
        <div class="leFadeInRight sequence"> Example </div>

Fade In Top CSS3 Animation

        /*CSS*/
        .leFadeInTop span { animation-name: leFadeInTop }
        @keyframes leFadeInTop {
            from {
                opacity: 0;
                transform: translateY(-100%);
            }
            to { opacity: 1 }
        }
        <!--HTML-->
        <div class="leFadeInTop sequence"> Example </div>

Fade In Bottom CSS3 Animation

        /*CSS*/
        .leFadeInBottom span { animation-name: leFadeInBottom }
        @keyframes leFadeInBottom {
            from {
                opacity: 0;
                transform: translateY(100%);
            }
            to { opacity: 1 }
        }
        <!--HTML-->
        <div class="leFadeInBottom sequence"> Example </div>

03 Letter Fade Out

Fade Out CSS3 Animation

        /*CSS*/
        .leFadeOut span { animation-name: leFadeOut }
        @keyframes leFadeOut {
            to { opacity: 0 }
        }
        <!--HTML-->
        <div class="leFadeOut sequence"> Example </div>

Fade Out Left CSS3 Animation

        /*CSS*/
        .leFadeOutLeft span { animation-name: leFadeOutLeft }
        @keyframes leFadeOutLeft {
            from { opacity: 1 }
            to {
                opacity: 0;
                transform: translateX(-60px);
            }
        }
        <!--HTML-->
        <div class="leFadeOutLeft sequence"> Example </div>

Fade Out Right CSS3 Animation

        /*CSS*/
        .leFadeOutRight span { animation-name: leFadeOutRight }
        @keyframes leFadeOutRight {
            from { opacity: 1 }
            to {
                opacity: 0;
                transform: translateX(60px);
            }
        }
        <!--HTML-->
        <div class="leFadeOutRight sequence"> Example </div>

Fade Out Top CSS3 Animation

        /*CSS*/
        .leFadeOutTop span { animation-name: leFadeOutTop }
        @keyframes leFadeOutTop {
            from { opacity: 1 }
            to {
                opacity: 0;
                transform: translateY(-100%);
            }
        }
        <!--HTML-->
        <div class="leFadeOutTop sequence"> Example </div>

Fade Out Bottom CSS3 Animation

        /*CSS*/
        .leFadeOutBottom span { animation-name: leFadeOutBottom }
        @keyframes leFadeOutBottom {
            from { opacity: 1 }
            to {
                opacity: 0;
                transform: translateY(100%);
            }
        }
        <!--HTML-->
        <div class="leFadeOutBottom sequence"> Example </div>

04 Moving Back

Moving Back From Right CSS3 Animation

        /*CSS*/
        .leMovingBackFromRight span { animation-name: leMovingBackFromRight; transform-origin: bottom }
        @keyframes leMovingBackFromRight {
            40% { transform: rotate(45deg) }
            100% {
                transform: rotate(0deg);
                animation-timing-function: cubic-bezier(0,.9,.7,1.45)
            }
        }
        <!--HTML-->
        <div class="leMovingBackFromRight sequence"> Example </div>

Moving Back From Left CSS3 Animation

        /*CSS*/
        .leMovingBackFromLeft span { animation-name: leMovingBackFromLeft; transform-origin: bottom }
        @keyframes leMovingBackFromLeft {
            40% { transform: rotate(-45deg) }
            100% {
                transform: rotate(0deg);
                animation-timing-function: cubic-bezier(0,.9,.7,1.45)
            }
        }
        <!--HTML-->
        <div class="leMovingBackFromLeft sequence"> Example </div>

05 Kick Out

Kick Out Front CSS3 Animation

        /*CSS*/
        .leKickOutFront span { animation-name: leKickOutBehind; transform-origin: top }
        @keyframes leKickOutBehind {
            40% { transform: rotate(-45deg) }
            100% {
                transform: rotate(0deg);
                animation-timing-function: cubic-bezier(0,.9,.7,1.45)
            }
        }
        <!--HTML-->
        <div class="leKickOutFront sequence"> Example </div>

Kick Out Behind CSS3 Animation

        /*CSS*/
        .leKickOutBehind span { animation-name: leKickOutFront; transform-origin: top }
        @keyframes leKickOutFront {
            40% { transform: rotate(45deg) }
            100% {
                transform: rotate(0deg);
                animation-timing-function: cubic-bezier(0,.9,.7,1.45)
            }
        }
        <!--HTML-->
        <div class="leKickOutBehind sequence"> Example </div>

06 Letter Skate

Skate Left Right CSS3 Animation

        /*CSS*/
        .leSkateX span { animation-name: leScaleX; animation-iteration-count: infinite }
        @keyframes leScaleX {
            50% { transform: scaleX(0.4) }
        }
        <!--HTML-->
        <div class="leSkateX sequence"> Example </div>

Skate Top Bottom CSS3 Animation

        /*CSS*/
        .leSkateY span { animation-name: leSkateY; animation-iteration-count: infinite }
        @keyframes leSkateY {
            50% { transform: scaleY(0.4) }
        }
        <!--HTML-->
        <div class="leSkateY sequence"> Example </div>

Skate Both CSS3 Animation

        /*CSS*/
        .leSkateXY span { animation-name: leSkateXY; animation-iteration-count: infinite; animation-duration: 1.5s; }
        @keyframes leSkateXY {
            25% { transform: scale3d(1, 0.4, 0) }
            50% { transform: scale3d(0.4, 0.4, 1) }
            75% { transform: scale3d(0.4, 1, 1) }
        }
        <!--HTML-->
        <div class="leSkateXY sequence"> Example </div>

07 Letter Scale

ScaleX In CSS3 Animation

        /*CSS*/
        .leScaleXIn span { animation-name: leScaleXIn }
        @keyframes leScaleXIn {
            from {
                transform: perspective(400px) rotateX(90deg);
                opacity: 0;
            }
            50% { opacity: 1 }
        }
        <!--HTML-->
        <div class="leScaleXIn sequence"> Example </div>

ScaleX Out CSS3 Animation

        /*CSS*/
        .leScaleXOut span { animation-name: leScaleXOut }
        @keyframes leScaleXOut {
            to {
                transform: perspective(400px) rotateX(90deg);
                opacity: 0;
            }
            from { opacity: 1 }
        }
        <!--HTML-->
        <div class="leScaleXOut sequence"> Example </div>

ScaleY In CSS3 Animation

        /*CSS*/
        .leScaleYIn span { animation-name: leScaleYIn }
        @keyframes leScaleYIn {
            from {
                transform: perspective(400px) rotateY(90deg);
                opacity: 0;
            }
            50% { opacity: 1 }
        }
        <!--HTML-->
        <div class="leScaleYIn sequence"> Example </div>

ScaleY Out CSS3 Animation

        /*CSS*/
        .leScaleYOut span { animation-name: leScaleYOut }
        @keyframes leScaleYOut {
            to {
                transform: perspective(400px) rotateY(90deg);
                opacity: 0;
            }
            from { opacity: 1 }
        }
        <!--HTML-->
        <div class="leScaleYOut sequence"> Example </div>

08 Letter Jump

Letter Jump CSS3 Animation

        /*CSS*/
        .leJump span { animation-name: leJump; animation-iteration-count: infinite }
        @keyframes leJump {
            to { transform: translateY(-20px) }
        }
        <!--HTML-->
        <div class="leJump sequence"> Example </div>

09 Letter Elevate

Elevate Left CSS3 Animation

        /*CSS*/
        .leElevateLeft span { animation-name: leElevateLeft }
        @keyframes leElevateLeft {
            from {
                transform: translateY(100%) rotate(-20deg);
                transform-origin: right;
                opacity: 0;
            }
            40% {
                transform: rotate(20deg);
                transform-origin: right;
            }
            65% {
                transform: rotate(0deg);
                transform-origin: right;
            }
        }
        <!--HTML-->
        <div class="leElevateLeft sequence"> Example </div>

Elevate Right CSS3 Animation

        /*CSS*/
        .leElevateRight span { animation-name: leElevateRight }
        @keyframes leElevateRight {
            from {
                transform: translateY(100%) rotate(20deg);
                transform-origin: left;
                opacity: 0;
            }
            40% {
                transform: rotate(-20deg);
                transform-origin: left;
            }
            65% {
                transform: rotate(0deg);
                transform-origin: left;
            }
        }
        <!--HTML-->
        <div class="leElevateRight sequence"> Example </div>




If you’re looking for more cool and beautiful CSS3 Animations than visit CSS Animations. What do you think about this post? Share your experience let me know if you have any question. Please like, share and comments. Moreover, hire a Website Developer for Professional Website Development.

Author Info

Adnan Qaiser

Adnan Qaiser is a passionate, workaholic, techno savvy, innovative and knowledgeable team player who has worked in diverse cultures individually and with team both; he has all the profound expertise to serve at all levels of the Digital Marketing, E-Commerce, Website Development And Web Designing Industry.

http://www.adnanqaiser.com/

One comment

  1. maayi

    30 Mar 2019 - 8:55 am

    nice one!

Leave a Reply