[CSS] 애니메이션

---

1.@keyframes

from{}에 애니메이션 시작시점
to{}에 에니메이션 종료시점
@keyframs rule을 정한다.

 

<style>
    .movebox{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name:move;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

    @keyframes move {
        from{
            left: 0;
            background-color: red;
        }
        to{
            left: 300px;
            background-color: blue;
        }
        
    }

</style>


<div class="movebox"></div>

 

 

 

 

 

 

%를 통해 %단위로 키프레임을 삽입할수있다.

<style>
    .movebox{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name:move;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

    @keyframes move {
        0%{
            left: 0;
            background-color: red;
        }

        50%{left: 300px;}
        75%{left: 30px;}
        100%{
            left: 100px;
            background-color: blue;
        }
        
    }

</style>


<div class="movebox"></div>

 

 

 

 

 

2.animation-name

@keyframes 뒤에 애니메이션 이름을 프로퍼티값으로 사용한다. 1개 이상의 값을 가질수있다.

<style>
    .movebox{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name:move,round;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

    @keyframes move {
        0%{
            left: 0;
            background-color: red;
        }

        50%{left: 300px;}
        75%{left: 30px;}
        100%{
            left: 100px;
            background-color: blue;
        }
        
    }

    @keyframes round {
        0%{border-radius: 0;}
        100%{border-radius: 50%;}
    }

</style>


<div class="movebox"></div>

 

 

 

 

 

3.animation-duration

한 싸이클의 애니메이션시간을 지정

 

 

4. animation-timing-function

애니메이션 효과 수치함수 지정

 

 

 

5.animation-delay

실제 애니메이션 시작까지의 대기시간

 

 

6.animation-iteration-count

애니메이션 재생 횟수 지정
기본값:1
(infinite으로 무한반복가능)

 

 

 

 

7.animation-direction

에니메이션 종료이후 반복시 방향지정
normal:0%->100%(기본값)
reverse: 100%->0%
alternative:홀수번 normal , 짝수번 reverse
alternative-reverse: 짝수번 normal , 홀수번 reverse

<style>
    .movebox{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name:move,round;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes move {
        0%{
            left: 0;
            background-color: red;
        }

        50%{left: 300px;}
        75%{left: 30px;}
        100%{
            left: 100px;
            background-color: blue;
        }
        
    }

    @keyframes round {
        0%{border-radius: 0;}
        100%{border-radius: 50%;}
    }

</style>


<div class="movebox"></div>

 

 

 

 

8.animation-fill-mode

애니메이션 미실행 시 스타일지정

• none: 애니메이션 전후에 요소의 스타일이 원래 상태로 돌아간다.
• forwards: 애니메이션 종료 후 마지막 키프레임의 스타일을 유지한다.
• backwards: 애니메이션 시작 전 첫 번째 키프레임의 스타일을 적용한다.
• both: 애니메이션 시작 전 첫 번째 키프레임의 스타일을 적용하고, 종료 후 마지막 키프레임의 스타일을 유지한다.

 

 

 

9.animation-play-state

애니메이션 재생 상태지정

 

<style>
    .movebox{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name:move,round;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    .movebox:hover{animation-play-state: paused;}

    @keyframes move {
        0%{
            left: 0;
            background-color: red;
        }

        50%{left: 300px;}
        75%{left: 30px;}
        100%{
            left: 100px;
            background-color: blue;
        }
        
    }

    @keyframes round {
        0%{border-radius: 0;}
        100%{border-radius: 50%;}
    }

</style>


<div class="movebox"></div>

 

 

 

 

 

 

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-animation