CCS 애니메이션

 

애니메이션 

        body {
            display: flex;
            align-items: center;
            background: #333;
            height: 100vh;
        }

        .box {
            font-size: 200px;
            width: 200px;
            height: 200px;
            background: transparent;
            position: relative;
            /* 애니메이션 시작 */
            /* 이름 */
            animation-name: animate2;

            /* 시간 */
            animation-duration: 5s;
            /* 횟수 infinite:무한대; 숫자입력 */
            animation-iteration-count: infinite;
            /* 마지막 상태: backwords, forwords*/
            animation-fill-mode: backwords;
            /* 진행방향 nomal 정방향, reverse 거꾸로, alternate 왔다갔다*/
            animation-direction: alternate;

        }

        @keyframes animate1 {

            /* 시작 */
            0% {
                transform: translateX(0);
                background-color: red;
            }

            /* 끝 */
            100% {
                transform: translateX(500%) scale(1.5) rotate(360deg);
                background-color: blue;

            }
        }

        @keyframes animate2 {

            /* % 방법 */
            0% {
                left: 0px;
                top: 0px;
                background-color: white;
                border-radius: 0 0 0 0;
            }

            25% {
                left: 300px;
                top: 0px;
                background-color: red;
                border-radius: 50% 0 0 0;
            }

            50% {
                left: 300px;
                top: 300px;
                background-color: green;
                border-radius: 50% 50% 0 0;
            }

            75% {
                left: 0px;
                top: 300px;
                background-color: blue;
                border-radius: 50% 50% 50% 0;
            }

            100% {
                left: 0px;
                top: 0px;
                background-color: white;
                border-radius: 50% 50% 50% 50%;
            }
        }

 

애니메이션 실습

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html {
    background-color: #608699;
    line-height: 1.7;
}

body {
    font-family: 'PT Sans', Arial, sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

/* Main Column Typography */
.main-area h2 {
    font-size: 165%;
    font-weight: normal;
}

.section {
    padding-left: 40px;
    padding-right: 40px;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

@media screen and (min-width: 1280px) {
    body {
        font-size: 16px;
    }

    .container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 767px) {
    .section {
        padding-left: 20px;
        padding-right: 20px;
    }
}

header {
    padding-top: 20px;
    color: #fff;
    background-color: #405c71;
}

header h1 {
    margin: 0;
    font-weight: normal;
    font-size: 165%;
}

header p {
    font-size: 90%;
    margin: 0;
}

/* Site Navigation */
.site-nav {
    margin-top: 20px;
}

.site-nav ul {
    margin: 0;
    padding: 0;
}

.site-nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}

.site-nav a {
    display: block;
    color: #fff;
    padding: 10px 20px;
    background-color: #365267;
    transition-property: color, background-color;
    transition-duration: 2s;
}

.site-nav a:hover {
    background-color: #fff;
    color: #2c465a;
}

@media screen and (max-width: 1023px) {
    .site-nav li {
        width: 33.332%;
        margin-right: 0;
    }

    .site-nav a {
        padding: 15px 0;
        margin-right: 5px;
        margin-bottom: 5px;
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    .site-nav li {
        width: 50%;
    }
}

/* End Site Navigation */

.content-area {
    background-color: #fff;
    padding-bottom: 40px;
    padding-top: 40px;
}

@media screen and (max-width: 767px) {
    .content-area {
        padding-top: 20px;
    }
}

.flexbox {
    display: flex;
}

.main-area {
    flex-basis: 66%;
    padding-right: 40px;
    box-sizing: border-box;
}

.sidebar {
    flex-basis: 34%;
    color: #555;
    font-size: 85%;
}

.sidebar h3 {
    font-size: 138.5%;
    margin-bottom: 7px;
}



@media screen and (max-width: 767px) {
    .hide-small {
        display: none;
    }

    .flexbox {
        display: block;
    }

    .main-area {
        padding-right: 0;
    }
}

.boxes {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* Bounce 애니메이션 */
@keyframes fadeBounce {
    0% {
        opacity: 0;
        transform: translateY(-200%);
    }

    40% {
        transform: translateY(0);
    }

    55% {
        transform: translateY(-6px);
    }

    70% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        transform: translateY(-3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.box-a {
    margin: 10px;
    flex-basis: 100%;
    opacity: 0;
    animation: fadeBounce 1s forwards;
    /* animation-name: fadeBounce;
    animation-duration: 1s;
    animation-fill-mode: forwards; */
    background-color: #e7eff5;
    padding: 20px 20px 0 20px;
    border: 2px solid #d3dee7;
    margin-bottom: 30px;
    box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.box-a:hover {

    background-color: #649eca;
    padding: 20px 20px 0 20px;
    border: 2px solid #649eca;
    margin-bottom: 30px;
    box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.boxes :nth-child(2) {
    animation-delay: 0.5s;
}

.boxes :nth-child(3) {
    animation-delay: 1s;
}

.boxes :nth-child(4) {
    animation-delay: 1.5s;
}





/* Star 애니메이션 */
@keyframes slideSpin {
    50% {
        transform: translateX(150%) scale(0.5);
    }

    75% {
        transform: translateX(150%) rotate(180deg) scale(0.5);
    }

    100% {
        transform: translateX(300%) rotate(180deg);
    }
}

.star {
    animation: slideSpin 2s infinite alternate;
    width: 25%;
    height: auto;
}

@media screen and (min-width: 1280px) {
    .box-a {
        flex-basis: 42%;
    }
}

footer {
    text-align: center;
    font-size: 85%;
    color: #fff;
    padding-bottom: 20px;
    padding-top: 20px;
}

 

참고

https://www.youtube.com/watch?v=ru5FGYuycwY&list=PLKvVQ9ZQzjVkwahMynnQuY0E_ohMtzBxn&index=6