css-transition이랑 다른 부분은 key-frame을 추가 할 수 있다.

key-frame 중간에 변화를 줄 수 있는 부분.

애니메이션에는 타임라인이 있다. 0% ~~~ 10% ~~~ 50% ~~~~ 100%

/* 애니메이션이름 sample-ani */
@keyframes sample-ani {
            0% {
                transform: translate(0, 0);
            }
            50% {
                background: red;
                transform: translate(300px, 0);
            }
            100% {
                transform: translate(400px, 500px);
            }
        }
        .box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            border: 2px solid #000;
            background: #fff000;
            animation: sample-ani 2s linear forwards 3;
        }

animation 속성들

1. animtaion-name : key-frame에서 지어준 애니메이션 이름
2. animation-duration : 애니메이션을 얼마동안 보여줄거냐
3. animation-timing-function : 애니메이션 가속도 함수
4. animation-delay : 얼마있다가 애니메이션 실행할건지
5. animation-iteration-count : 몇번 실행 할것인가? 반복횟수
6. animation-direction : 애니메이션 방향
   1. alertnate : 애니메이션이 반대방향으로 다시 이동
   2. reverse : 아예 애니메이션으로 거꾸로 동작함.
   3. alertnate-reverse
7. animation-fill-mode
   1. forwards
8. animation-play-state : 애니메이션 정지할건지 재개할건지
   1. running : 플레이
   2. paused : 정지

Frame by Frame

<aside> 💡 한컷 한컷 그려서 그것을 연결시켜 애니메이션처럼 보이게 하는방식 : 노가다방식 === 고전방식

</aside>

이미지 스프라이트를 가져야한다.