본문 바로가기
프론트엔드 개발자/CSS

Html Css 애니메이션 사용하기 움직이는 동작법 완벽정리!!!

by 신디블로그 2023. 3. 31.
SMALL
// css keyframe rule


key + frame

css keyframe사용하기

1)ketframe rule 정의하기 - 애니메이션정의

@ketframes 애니메이션이름 {

}

2)키프레임 정의하기 애니메이션 패턴을 작성

    - % 0 ~ 100% 범위안에서 작성
    - from, to을 이용하여 작성

@keyframe 애니메이션이름 {
    0% { width:100px; }
    50% { width:100px; }
    100% { width:100px; }
}

3) 선택자에서 정의한 애니메이션이름을 호출

    애니메이션을 적용하고 싶은 요소에서 애니를 호출

    animation-name : 애니메이션이름
    animation-duration: 애니메이션 지속시간
    animation-iteration-count: 반복횟수 무한대(infinite)
    animation-direction: alternate; 반복패턴 /* alternate; 핑퐁효과 */
    animation-fill-mode : both (css설정값과 애니메이션 설정값이 다를경우 애니메이션 값으로 요소를 설정함)


@ = 규칙
@이름 ---> 이름 Ruel

@keyframe 키프레임룰
@media 미디어룰
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box {
            width: 100px;
            height: 100px;
            background: #f00;
            animation-name: move1;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            position: absolute;
            right:0; top:0;
           
            animation-name: move2;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate; /* 핑퐁효과 */
        }

        .box2 {
            width: 500px;
            height: 100px;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: rgb(9, 33, 170);
            animation-name: move3;
            animation-duration: 4s;
            animation-fill-mode: both;
            animation-iteration-count: infinite;        
            animation-timing-function: ease-in-out;
        }


        /* 애니메이션 정의하기 */
        /* 애니메이션이름은 클래스이름작성법과 동일. */
        @keyframes move1 {
            0% { width:100px; height: 100px; }
            50% { width:500px; height: 200px; }
            100% { width:100px; height: 100px; }
        }

        @keyframes move2 {
            from { top:0; }  /* from:0% */
            to { top:100px; } /* to:100% */
        }

        @keyframes move3 {
            from {
                left: 500px;
                bottom:500px;
                }
            to {
                left: 100px;
                bottom:100px;
                }
            }
       

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        * {
            margin:0; padding:0;
        }
        body {
            padding: 50px;
            display: flex;
            flex-wrap: wrap;
            gap:50px;
        }

        .box {
            width: 300px;
            height: 200px;
            background-color: #fc0;
            position: relative;
        }
        .box .child {
            width: 50px;
            height: 50px;
            background-color: violet;
            position: absolute;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .box1 .child {
            animation-name: move1;
            animation-duration: 4s;
        }
        .box2 .child {
            animation-name: move2;
            animation-duration: 4s;

        }
        .box3 .child {
            animation-name: move3;
            animation-duration: 4s;
        }
        .box4 .child {
            animation-name: rotate;
            animation-duration: 4s;
        }
        .box5 .child {
            animation-name: swing;
            animation-duration: 4s;
        }
        .box6 .child {
            animation-name: bounce;
            animation-duration: 4s;
        }
        .box7 .child {
            animation-name: fade-inout;
            animation-duration: 4s;
        }

        .box8 .down {
            width: 150px;
            height: 150px;
            position: absolute;
            left:50%; top:50%;
            transform: translate(-50%, -50%);
        }
        .box8 .down::before {
            content: '';
            width: 100%;
            height: 100%;
            background-color: #333;
            position: absolute;
            left:0; top:0;
            clip-path: polygon(0 0,50% 70%,100% 0,100% 10%,50% 80%,0 10%);
            animation-name: downup;
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .box8 .down::after {
            content: '';
            width: 100%;
            height: 100%;
            background-color: #444;
            position: absolute;
            left:0; top:0;
            clip-path: polygon(0 20%,50% 90%,100% 20%,100% 30%,50% 100%,0 30%);
            animation-name: downup;
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }




        /* 키프레임 정의하기 */
        @keyframes move1 {
            0% { left:0; }
            50% { left:calc(100% - 50px)}
            100% { left:0;}
        }
        @keyframes move2 {
            0% { top:0; }
            50% { top:calc(100% - 50px) }
            100% { top:0; }
        }
        @keyframes move3 {
            0% { left:0; bottom:0; }
            50% { left:calc(100% - 50px); bottom:calc(100% - 50px)}
            100% { left:0; bottom:0; }
        }
        @keyframes rotate {
            0% { transform: rotate(0deg);}
            100% { transform: rotate(360deg);}            
        }
        @keyframes swing {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(100deg); }
            100% { transform: rotate(0deg);}
           
        }
        @keyframes bounce {
            0% { left:0; bottom:calc(100% - 50px); }
            20% { bottom:0; }
            40% { bottom:50%;}
            60% { bottom:0; }
            80% { bottom:25%; }
            100% { left:calc(100% - 50px); bottom:0; }
        }
        @keyframes fade-inout {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1;}
        }

        @keyframes downup {
            0% {top: 50%;}
            50% { top:60%;}
            100% { top:50%;}
        }

    </style>
</head>
<body>
    <div class="box box1">
        <div class="child"></div>
    </div>
    <div class="box box2">
        <div class="child"></div>
    </div>
    <div class="box box3">
        <div class="child"></div>
    </div>
    <div class="box box4">
        <div class="child"></div>
    </div>
    <div class="box box5">
        <div class="child"></div>
    </div>
    <div class="box box6">
        <div class="child"></div>
    </div>
    <div class="box box7">
        <div class="child"></div>
    </div>
    <div class="box box8">
        <div class="down"></div>
    </div>
   
</body>
</html>

LIST
저작자표시 비영리 변경금지 (새창열림)

'프론트엔드 개발자 > CSS' 카테고리의 다른 글

CSS _ 애니메이션 연습(1)  (0) 2023.04.05
CSS 그라디언트 사용하기와 애니메이션 사용하기  (0) 2023.04.05
css reset폴더 만들기  (0) 2023.03.29
클론코딩 레이아웃 만들기3  (0) 2023.03.29
html css 레이아웃 구성하기 1  (0) 2023.03.28

관련글

댓글

티스토리툴바