STYLE SHEET/Animation

CSS @Keyframes 복습

두비_ 2022. 6. 13. 17:48
반응형

css keyframes을 이용한 마을꾸미기 해봤습니다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TOWN_ANIMATION</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <section>
        <article class="sky">
            <img src="img/sun.png" alt="sun" class="sun">
            <img src="img/cloud1.png" alt="cloud1" class="cloud1">
            <img src="img/cloud2.png" alt="cloud2" class="cloud2">
            <img src="img/airplane.png" alt="airplane" class="airplane">
        </article>

        <article class="town">
            <img src="img/circle.png" alt="circle" class="circle">
            <img src="img/town_night.png" alt="night" class="night">
            <img src="img/town_day.png" alt="day" class="day">
        </article>

        <article class="people">
            <img src="./img/man.png" alt="man" class="man">
            <img src="./img/family.png" alt="family" class="family">
        </article>
    </section>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

/* reset.css */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    animation: sky linear 20s infinite;
}

section {
    width: 1000px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -500px;
}

section .sky {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

section .sky .sun {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: -150px;
    transform-origin: center 500px;
    animation: sun linear 20s infinite;
}

section .sky .cloud1 {
    position: absolute;
    top: -30px;
    left: 10%;
    animation: flow linear 10s infinite;
}

section .sky .cloud2 {
    position: absolute;
    top: 20px;
    left: 0%;
    animation: flow linear 20s infinite;
}

section .sky .airplane {
    position: absolute;
    top: -100px;
    right: 0%;
    width: 120px;
    animation: reflow linear 20s infinite;
}

section .town .circle {
    position: absolute;
    bottom: 104px;
    left: 50%;
    margin-left: -165px;
    opacity: 0.7;
    animation: rotation linear 20s infinite;
}

section .town .night {
    position: absolute;
    bottom: 0px;
    left: 40px;
}

section .town .day {
    position: absolute;
    bottom: 0px;
    left: 40px;
    animation: day linear 20s infinite;
}

section .people {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    animation: day linear 20s infinite;
}

section .people .man {
    position: absolute;
    left: 0%;
    bottom: 0px;
    animation: flow linear 7s infinite;
}

section .people .family {
    position: absolute;
    left: 0%;
    bottom: 0px;
    animation: flow linear 20s infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sun {
    0% {
        transform: rotate(-90deg);
        opacity: 0;
    }
    25% {
        transform: rotate(-30deg);
        opacity: 1;
    }
    50% {
        transform: rotate(30deg);
        opacity: 1;
    }
    75% {
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform: rotate(-90deg);
        opacity: 0;
    }
}

@keyframes sky {
    0% {
        background: #b08fcc;
    }
    25% {
        background: #b1e1e2;
    }
    50% {
        background: #fcd2e2;
    }
    75% {
        background: #636888;
    }
    100% {
        background: #b08fcc;
    }
}

@keyframes day {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes flow {
    0% {left: 0%; opacity: 0;}
    10% {opacity: 1;}
    80% {opacity: 1;}
    100% {left: 90%; opacity: 0;}
}

@Keyframes reflow {
    0% {right: 0%; opacity: 0;}
    10% {opacity: 1;}
    80% {opacity: 1;}
    100% {right: 90%; opacity: 0;}
}
 
저작자표시 비영리 변경금지