Mind-Blowing CSS Animation Examples (Free Code + Demos)

0

  If you're ready to elevate your web design game, we've got something special for you! Behold our Mind-Blowing CSS Animation Examples that come complete with free code and live demos. Powered by the dynamic duo of HTML and CSS, this project showcases a symphony of animations that will leave your users in awe.


Harnessing the flexibility of flexbox, we've ensured a seamless and visually captivating layout that effortlessly adapts to various screen sizes. The real magic, however, unfolds with the mesmerizing hover effects on the images, injecting a dose of interactivity to captivate and engage your audience.


Now, brace yourself for the exciting part — you can grab the entire source code of this animation extravaganza for absolutely free. Take a deep dive into this post, snatch the code, and effortlessly run it in your preferred code editor. Unleash the creativity, and happy coding!





HTML CODE



<body>

    <div class="animation01">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

    <div class="animation02">

        <div></div>

        <div></div>

    </div>

    <div class="animation03">

        <div class="circle">

            <div class="circle_element01"></div>

        </div>

        <div class="circle">

            <div class="circle_element02"></div>

        </div>

        <div class="circle">

            <div class="circle_element03"></div>

        </div>

        <div class="animation04">

            <div class="line_wrapper line_wrapper01">

                <span class="line line01"></span>

            </div>

            <div class="rotate45">

                <div class="line_wrapper line_wrapper02">

                    <span class="line line02"></span>

                </div>

            </div>

            <div class="line_wrapper line_wrapper03">

                <span class="line line03"></span>

            </div>

            <div class="rotate135">

                <div class="line_wrapper line_wrapper04">

                    <span class="line line04"></span>

                </div>

            </div>

            <div class="line_wrapper line_wrapper05">

                <span class="line line05"></span>

            </div>

            <div class="rotate-135">

                <div class="line_wrapper line_wrapper06">

                    <span class="line line06"></span>

                </div>

            </div>

            <div class="line_wrapper line_wrapper07">

                <span class="line line07"></span>

            </div>

            <div class="rotate-45">

                <div class="line_wrapper line_wrapper08">

                    <span class="line line08"></span>

                </div>

            </div>

        </div>

        <div class="animation05">

            <div class="double_wrapper02 green02">

                <div class="double_wrapper01 green01">

                    <div class="double_block green00"></div>

                </div>

            </div>

            <div class="double_wrapper02 navy02">

                <div class="double_wrapper01 navy01">

                    <div class="double_block navy00"></div>

                </div>

            </div>

            <div class="double_wrapper02 yellow02">

                <div class="double_wrapper01 yellow01">

                    <div class="double_block yellow00"></div>

                </div>

            </div>

            <div class="double_wrapper02 blue02">

                <div class="double_wrapper01 blue01">

                    <div class="double_block blue00"></div>

                </div>

            </div>

            <div class="double_wrapper02 red02">

                <div class="double_wrapper01 red01">

                    <div class="double_block red00"></div>

                </div>

            </div>

        </div>

    </div>

    <div class="animation06">

        <div class="rhombus05">

            <div class="rhombus04">

                <div class="rhombus03">

                    <div class="rhombus02">

                        <div class="rhombus01"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="animation07">

        <div class="circle">

            <div class="circle_element01"></div>

        </div>

        <div class="line_wrapper line_wrapper01">

            <span class="line line01"></span>

        </div>

        <div class="rotate60">

            <div class="line_wrapper line_wrapper02">

                <span class="line line02"></span>

            </div>

        </div>

        <div class="rotate120">

            <div class="line_wrapper line_wrapper03">

                <span class="line line03"></span>

            </div>

        </div>

        <div class="line_wrapper line_wrapper04">

            <span class="line line04"></span>

        </div>

        <div class="rotate-120">

            <div class="line_wrapper line_wrapper05">

                <span class="line line05"></span>

            </div>

        </div>

        <div class="rotate-60">

            <div class="line_wrapper line_wrapper06">

                <span class="line line06"></span>

            </div>

        </div>

    </div>

    <div class="animation08">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>





CSS CODE



/*=================
Basic style
==================*/

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
}

img {
    max-width: 100%;
    width: 100%;
    vertical-align: bottom;
}

h1, h2, p {
    margin: 0;
}

/*===================
animation01
====================*/

.animation01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.animation01 div {
    width: 20%;
    height: 100%;
    animation: animation01 0.275s ease-in forwards;
    transform-origin: bottom;
    opacity: 0;
}

.animation01 div:nth-child(1) {
    background-color: #d55959;
    animation-delay: 0.4s;
}

.animation01 div:nth-child(2) {
    background-color: #ffe08b;
    animation-delay: 0.3s;
}

.animation01 div:nth-child(3) {
    background-color: #75cfb9;
    animation-delay: 0.2s;
}

.animation01 div:nth-child(4) {
    background-color: #f1a05b;
    animation-delay: 0.1s;
}

.animation01 div:nth-child(5) {
    background-color: #78bee4;
}

@keyframes animation01 {
    0% {
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===================
animation02
====================*/

.animation02 {
    position: absolute;
    width: 100%;
    height: 100%;
}

.animation02 div {
    position: absolute;
    width: 0;
    height: 0;
    animation: animation02 0.6s ease-in 0.6s forwards;
    opacity: 0;
}

.animation02 div:nth-child(1) {
    top: 0;
    left: 0;
    border-top: 100vh solid transparent;
    border-right: 100vw solid #f2f3df;
    transform-origin: bottom right;
}

.animation02 div:nth-child(2) {
    right: 0;
    bottom: 0;
    border-bottom: 100vh solid transparent;
    border-left: 100vw solid #f2f3df;
    transform-origin: top left;
}

@keyframes animation02 {
    0% {
        transform: scale3d(0, 0, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===================
animation03
====================*/

.animation03 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13vw;
    height: 13vw;
}

.animation03 .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    background-color: transparent;
    z-index: 9998;
}

.animation03 .circle_element01 {
    width: 13vw;
    height: 13vw;
    border: 0.25vw solid #54988b;
    border-radius: 50%;
    animation: animation03_circle 0.3s ease-in-out 0.5s forwards, animation03_circle_element01 0.3s linear 0.9s forwards;
    opacity: 0;
}

.animation03 .circle_element02 {
    width: 9vw;
    height: 9vw;
    border: 0.5vw solid #4b5e58;
    border-radius: 50%;
    animation: animation03_circle 0.4s ease-in-out 0.5s forwards, animation03_circle_element02 0.2s linear 1.0s forwards;
    opacity: 0;
}

.animation03 .circle_element03 {
    width: 4vw;
    height: 4vw;
    border: 1vw solid #404a52;
    border-radius: 50%;
    animation: animation03_circle 0.45s ease-in-out 0.5s forwards, animation03_circle_element03 0.15s linear 1.4s forwards;
    opacity: 0;
}

@keyframes animation03_circle {
    0% {
        transform: scale3d(0, 0, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

@keyframes animation03_circle_element01 {
    0% {
        border: 0.25vw solid #54988b;
    }
    100% {
        border: 0 solid #54988b;
    }
}

@keyframes animation03_circle_element02 {
    0% {
        border: 0.5vw solid #4b5e58;
    }
    100% {
        border: 0 solid #4b5e58;
    }
}

@keyframes animation03_circle_element03 {
    0% {
        border: 1vw solid #404a52;
    }
    100% {
        border: 0 solid #404a52;
    }
}

/*===================
animation04
====================*/

.animation04 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.animation04 .line_wrapper {
    position: absolute;
    opacity: 0;
}

.animation04 .line {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
}

/*===========
line01
===========*/

.animation04 .line_wrapper01 {
    top: -20%;
    left: 50%;
    width: 2.5%;
    height: 30%;
    animation: animation04_line_wrapper01 0.45s ease-in 0.8s forwards;
}

.animation04 .line01 {
    animation: animation04_line01 0.45s ease-in 0.5s forwards;
}

@keyframes animation04_line_wrapper01 {
    0% {
        transform-origin: top;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: top;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
}

@keyframes animation04_line01 {
    0% {
        transform-origin: bottom;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform-origin: bottom;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===========
line02
===========*/

.animation04 .rotate45 {
    display: block;
    position: absolute;
    top: 22.5%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
}

.animation04 .line_wrapper02 {
    width: 2.5%;
    height: 30%;
    animation: animation04_line_wrapper02 0.45s ease-in 0.8s forwards;
}

.animation04 .line02 {
    animation: animation04_line02 0.45s ease-in 0.5s forwards;
}

@keyframes animation04_line_wrapper02 {
    0% {
        transform-origin: top;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: top;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
}

@keyframes animation04_line02 {
    0% {
        transform-origin: bottom;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform-origin: bottom;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===========
line03
===========*/

.animation04 .line_wrapper03 {
    top: 50%;
    left: 90%;
    width: 30%;
    height: 2.5%;
    animation: animation04_line_wrapper03 0.45s ease-in 0.8s forwards;
}

.animation04 .line03 {
    animation: animation04_line03 0.45s ease-in 0.5s forwards;
}

@keyframes animation04_line_wrapper03 {
    0% {
        transform-origin: right;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: right;
        transform: scale3d(0, 1, 1);
        opacity: 1;
    }
}

@keyframes animation04_line03 {
    0% {
        transform-origin: left;
        transform: scale3d(0, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: left;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===========
line04
===========*/

.animation04 .rotate135 {
    display: block;
    position: absolute;
    top: 49.5%;
    left: -22%;
    width: 100%;
    height: 100%;
    transform: rotate(135deg);
}

.animation04 .line_wrapper04 {
    width: 2.5%;
    height: 30%;
    animation: animation04_line_wrapper04 0.45s ease-in 0.8s forwards;
}

.animation04 .line04 {
    animation: animation04_line04 0.45s ease-in 0.5s forwards;
}

@keyframes animation04_line_wrapper04 {
    0% {
        transform-origin: top;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: top;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
}

@keyframes animation04_line04 {
    0% {
        transform-origin: bottom;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform-origin: bottom;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===========
line05
===========*/

.animation04 .line_wrapper05 {
    top: 90%;
    left: 50%;
    width: 2.5%;
    height: 30%;
    animation: animation04_line_wrapper05 0.45s ease-in 0.8s forwards;
}

.animation04 .line05 {
    animation: animation04_line05 0.45s ease-in 0.5s forwards;
}

@keyframes animation04_line_wrapper05 {
    0% {
        transform-origin: bottom;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: bottom;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
}

@keyframes animation04_line05 {
    0% {
        transform-origin: top;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform-origin: top;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===========
line06
===========*/

.animation04 .rotate-135 {
    display: block;
    position: absolute;
    top: -19.5%;
    left: -48%;
    width: 100%;
    height: 100%;
    transform: rotate(-135deg);
}

.animation04 .line_wrapper06 {
    width: 2.5%;
    height: 30%;
    animation: animation04_line_wrapper06 0.45s ease-in 0.8s forwards;
}

.animation04 .line06 {
    animation: animation04_line06 0.45s ease-in 0.5s forwards;
}

@keyframes animation04_line_wrapper06 {
    0% {
        transform-origin: top;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: top;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
}

@keyframes animation04_line06 {
    0% {
        transform-origin: bottom;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform-origin: bottom;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===========
line07
===========*/

.animation04 .line_wrapper07 {
    top: 50%;
    left: -20%;
    width: 30%;
    height: 2.5%;
    animation: animation04_line_wrapper07 0.45s ease-in 0.8s forwards;
}

.animation04 .line07 {
    animation: animation04_line07 0.45s ease-in 0.5s forwards;
}

@keyframes animation04_line_wrapper07 {
    0% {
        transform-origin: left;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: left;
        transform: scale3d(0, 1, 1);
        opacity: 1;
    }
}

@keyframes animation04_line07 {
    0% {
        transform-origin: right;
        transform: scale3d(0, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: right;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===========
line08
===========*/

.animation04 .rotate-45 {
    display: block;
    position: absolute;
    top: -49.0%;
    left: 20%;
    width: 100%;
    height: 100%;
    transform: rotate(-45deg);
}

.animation04 .line_wrapper08 {
    width: 2.5%;
    height: 30%;
    animation: animation04_line_wrapper08 0.45s ease-in 0.8s forwards;
}

.animation04 .line08 {
    animation: animation04_line08 0.45s ease-in 0.5s forwards;
}

@keyframes animation04_line_wrapper08 {
    0% {
        transform-origin: top;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: top;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
}

@keyframes animation04_line08 {
    0% {
        transform-origin: bottom;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform-origin: bottom;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===================
animation05
====================*/

.animation05 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.double_wrapper02 {
    position: relative;
    width: 100%;
    height: 100%;
    animation: animation05_double forwards;
    opacity: 0;
}

.double_wrapper01 {
    display: block;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}

.double_wrapper01::before {
    content: "";
    display: block;
    position: absolute;
    background: #f2f3df;
    z-index: 2;
}

.double_wrapper01::after {
    content: "";
    display: block;
    position: absolute;
    background: #f2f3df;
    z-index: 3;
}

.double_block {
    position: absolute;
    background: #f2f3df;
    border-radius: 50%;
}

/*==============
green circle
==============*/

.green02 {
    top: 0;
    animation-delay: 1.3s;
}

.green01 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34vw;
    height: 34vw;
    background: #75cfb9;
    z-index: 1;
}

.green01::before {
    top: 0;
    left: 17vw;
    width: 34vw;
    height: 34vw;
    transform-origin: left 17vw;
    animation: rotate-circle-right 0.5s linear 1.55s forwards;
}

.green01::after {
    top: 0;
    left: -17vw;
    width: 34vw;
    height: 34vw;
    transform-origin: right 17vw;
    animation: rotate-circle-left 0.5s linear 1.3s forwards;
}

.green00 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9vw;
    height: 9vw;
    z-index: 4;
}

/*==============
navy circle
==============*/

.navy02 {
    top: -100%;
    animation-delay: 1.4s;
}

.navy01 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    width: 25vw;
    height: 25vw;
    background: #485973;
    z-index: 1;
}

.navy01::before {
    top: 0;
    left: 12.5vw;
    width: 25vw;
    height: 25vw;
    transform-origin: left 12.5vw;
    animation: rotate-circle-right 0.5s linear 1.65s forwards;
}

.navy01::after {
    top: 0;
    left: -12.5vw;
    width: 25vw;
    height: 25vw;
    transform-origin: right 12.5vw;
    animation: rotate-circle-left 0.5s linear 1.4s forwards;
}

.navy00 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9vw;
    height: 9vw;
    z-index: 4;
}

/*==============
yellow circle
==============*/

.yellow02 {
    top: -200%;
    animation-delay: 1.45s;
}

.yellow01 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(20deg);
    width: 23vw;
    height: 23vw;
    background: #ffe08b;
    z-index: 1;
}

.yellow01::before {
    top: 0;
    left: 11.5vw;
    width: 23vw;
    height: 23vw;
    transform-origin: left 11.5vw;
    animation: rotate-circle-right 0.5s linear 1.7s forwards;
}

.yellow01::after {
    top: 0;
    left: -11.5vw;
    width: 23vw;
    height: 23vw;
    transform-origin: right 11.5vw;
    animation: rotate-circle-left 0.5s linear 1.45s forwards;
}

.yellow00 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9vw;
    height: 9vw;
    z-index: 4;
}

/*==============
blue circle
==============*/

.blue02 {
    top: -300%;
    animation-delay: 1.2s;
}

.blue01 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(20deg);
    width: 16vw;
    height: 16vw;
    background: #457ed4;
    z-index: 1;
}

.blue01::before {
    top: 0;
    left: 8vw;
    width: 16vw;
    height: 16vw;
    transform-origin: left 8vw;
    animation: rotate-circle-right 0.5s linear 1.45s forwards;
}

.blue01::after {
    top: 0;
    left: -8vw;
    width: 16vw;
    height: 16vw;
    transform-origin: right 8vw;
    animation: rotate-circle-left 0.5s linear 1.2s forwards;
}

.blue00 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7vw;
    height: 7vw;
    z-index: 4;
}

/*==============
red circle
==============*/

.red02 {
    top: -400%;
    animation-delay: 1.3s;
}

.red01 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 12vw;
    height: 12vw;
    background: #e8595f;
    z-index: 1;
}

.red01::before {
    top: 0;
    left: 6vw;
    width: 12vw;
    height: 12vw;
    transform-origin: left 6vw;
    animation: rotate-circle-right 0.5s linear 1.55s forwards;
}

.red01::after {
    top: 0;
    left: -6vw;
    width: 12vw;
    height: 12vw;
    transform-origin: right 6vw;
    animation: rotate-circle-left 0.5s linear 1.3s forwards;
}

.red00 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9vw;
    height: 9vw;
    z-index: 4;
}

@keyframes animation05_double {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes rotate-circle-left {
    0% {
        background: #f2f3df;
        transform: rotate(0deg);
    }
    50% {
        background: #f2f3df;
        transform: rotate(-180deg);
    }
    50.01% {
        background: #f2f3df;
        transform: rotate(-180deg);
    }
    100% {
        background: #f2f3df;
        transform: rotate(-360deg);
    }
}

@keyframes rotate-circle-right {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/*===================
animation06
====================*/

.animation06 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.rhombus05 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rhombus 0.7s ease-in 2.0s forwards;
    opacity: 0;
}

.rhombus04 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 50vw;
    height: 50vw;
    background-color: #ef5958;
}

.rhombus03 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 37.5vw;
    height: 37.5vw;
    background-color: #77ceb9;
}

.rhombus02 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25vw;
    height: 25vw;
    background-color: #ffe08b;
}

.rhombus01 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12.25vw;
    height: 12.25vw;
    background-color: #f2f3df;
}

@keyframes rhombus {
    0% {
        transform: scale3d(0, 0, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(10, 10, 1);
        opacity: 1;
    }
}

/*===================
animation07
====================*/

.animation07 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5vw;
    height: 2.5vw;
}

.animation07 .circle {
    position: absolute;
    top: -.2vw;
    left: -.2vw;
    transform-origin: center;
    width: 2.5vw;
    height: 2.5vw;
    animation: animation07_circle 0.2s ease-in 2.19s forwards;
}

.animation07 .circle_element01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.5vw;
    height: 2.5vw;
    border: 0.2vw solid #a18a66;
    background-color: #fff;
    border-radius: 50%;
    animation: animation07_circle_element01 0.2s ease-in 2.0s forwards;
    transform-origin: center;
    opacity: 0;
}

@keyframes animation07_circle {
    0% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(1.4, 1.4, 1);
        opacity: 0;
    }
}

@keyframes animation07_circle_element01 {
    0% {
        transform: scale3d(0, 0, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

.animation07 .line_wrapper {
    position: absolute;
    opacity: 0;
}

.animation07 .line {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #a18a66;
}

/*===========
line01
===========*/

.animation07 .line_wrapper01 {
    top: -95%;
    left: 45%;
    width: 10%;
    height: 60%;
    animation: animation07_line_wrapper01 0.5s ease-in 2.0s forwards;
}

.animation07 .line01 {
    animation: animation07_line01 0.5s ease-in 1.6s forwards;
}

/*===========
line02
===========*/

.animation07 .rotate60 {
    display: block;
    position: absolute;
    top: 22.5%;
    left: 33%;
    width: 100%;
    height: 100%;
    transform: rotate(60deg);
}

.animation07 .line_wrapper02 {
    top: -78%;
    left: 10%;
    width: 10%;
    height: 60%;
    animation: animation07_line_wrapper01 0.5s ease-in 2.0s forwards;
}

.animation07 .line02 {
    animation: animation07_line01 0.5s ease-in 1.6s forwards;
}

/*===========
line03
===========*/

.animation07 .rotate120 {
    display: block;
    position: absolute;
    top: 36.5%;
    left: 0%;
    width: 100%;
    height: 100%;
    transform: rotate(120deg);
}

.animation07 .line_wrapper03 {
    top: -78%;
    left: 10%;
    width: 10%;
    height: 60%;
    animation: animation07_line_wrapper01 0.5s ease-in 2.0s forwards;
}

.animation07 .line03 {
    animation: animation07_line01 0.5s ease-in 1.6s forwards;
}

/*===========
line04
===========*/

.animation07 .line_wrapper04 {
    top: 140%;
    left: 45%;
    width: 10%;
    height: 60%;
    animation: animation07_line_wrapper02 0.5s ease-in 2.0s forwards;
}

.animation07 .line04 {
    animation: animation07_line02 0.5s ease-in 1.6s forwards;
}

/*===========
line05
===========*/

.animation07 .rotate-120 {
    display: block;
    position: absolute;
    top: -15.5%;
    left: -34%;
    width: 100%;
    height: 100%;
    transform: rotate(-120deg);
}

.animation07 .line_wrapper05 {
    top: -78%;
    left: 10%;
    width: 10%;
    height: 60%;
    animation: animation07_line_wrapper01 0.5s ease-in 2.0s forwards;
}

.animation07 .line05 {
    animation: animation07_line01 0.5s ease-in 1.6s forwards;
}

/*===========
line06
===========*/

.animation07 .rotate-60 {
    display: block;
    position: absolute;
    top: -34.5%;
    left: -3%;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
}

.animation07 .line_wrapper06 {
    top: -78%;
    left: 10%;
    width: 10%;
    height: 60%;
    animation: animation07_line_wrapper01 0.5s ease-in 2.0s forwards;
}

.animation07 .line06 {
    animation: animation07_line01 0.5s ease-in 1.6s forwards;
}

@keyframes animation07_line_wrapper01 {
    0% {
        transform-origin: top;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: top;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
}

@keyframes animation07_line01 {
    0% {
        transform-origin: bottom;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform-origin: bottom;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

@keyframes animation07_line_wrapper02 {
    0% {
        transform-origin: bottom;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    100% {
        transform-origin: bottom;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
}

@keyframes animation07_line02 {
    0% {
        transform-origin: top;
        transform: scale3d(1, 0, 1);
        opacity: 1;
    }
    100% {
        transform-origin: top;
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/*===================
animation08
====================*/

.animation08 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: animation08 1.5s ease-out 2.8s forwards;
    opacity: 0;
}

.animation08 div:nth-of-type(1) {
    width: 100%;
    height: 100%;
    background: #242324;
}

.animation08 div:nth-of-type(2) {
    width: 100%;
    height: 25%;
    background: #75cfb9;
}

.animation08 div:nth-of-type(3) {
    width: 100%;
    height: 25%;
    background: #457ed4;
}

.animation08 div:nth-of-type(4) {
    width: 100%;
    height: 25%;
    background: #e8595f;
}

.animation08 div:nth-of-type(5) {
    width: 100%;
    height: 25%;
    background: #ffe08b;
}

@keyframes animation08 {
    0% {
        transform: translateY(-200vh);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media screen and (max-width: 750px) {
/*===================
animation02
====================*/
@keyframes animation02 {
    0% {
        transform: scale3d(0, 0, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(1.2, 1.2, 1);
        opacity: 1;
    }
}
/*==============
green circle
==============*/
.green01 {
    width: 70vw;
    height: 70vw;
}
.green01::before {
    left: 35vw;
    width: 70vw;
    height: 70vw;
    transform-origin: left 35vw;
}
.green01::after {
    left: -35vw;
    width: 70vw;
    height: 70vw;
    transform-origin: right 35vw;
}
/*==============
navy circle
==============*/
.navy01 {
    width: 50vw;
    height: 50vw;
}
.navy01::before {
    left: 25vw;
    width: 50vw;
    height: 50vw;
    transform-origin: left 25vw;
}
.navy01::after {
    left: -25vw;
    width: 50vw;
    height: 50vw;
    transform-origin: right 25vw;
}
/*==============
yellow circle
==============*/
.yellow01 {
    width: 35vw;
    height: 35vw;
}
.yellow01::before {
    left: 17.5vw;
    width: 35vw;
    height: 35vw;
    transform-origin: left 17.5vw;
}
.yellow01::after {
    left: -17.5vw;
    width: 35vw;
    height: 35vw;
    transform-origin: right 17.5vw;
}
/*==============
blue circle
==============*/
.blue01 {
    width: 20vw;
    height: 20vw;
}
.blue01::before {
    left: 10vw;
    width: 20vw;
    height: 20vw;
    transform-origin: left 10vw;
}
.blue01::after {
    left: -10vw;
    width: 20vw;
    height: 20vw;
    transform-origin: right 10vw;
}
.blue00 {
    width: 7vw;
    height: 7vw;
}
/*==============
red circle
==============*/
.red00 {
    width: 6vw;
    height: 6vw;
}
/*===================
animation06
====================*/
@keyframes rhombus {
    0% {
        transform: scale3d(0, 0, 1);
        opacity: 1;
    }
    100% {
        transform: scale3d(20, 20, 1);
        opacity: 1;
    }
}
}
Tags

You may like these posts

Post a Comment

Previous Post Next Post