animation

⌨️ 문법

@keyframes big {}

• 시작하고 바로 실행 가능
• 키프레임 단위로 움직임

animation-name & animation-duration

wrapper:nth-of-type(1) > div:nth-child(1){
            animation-name: leftToRight;
            animation-duration: 3s;
        }
        wrapper:nth-of-type(1) > div:nth-child(2){
            animation-name: leftStep;
            animation-duration: 3s;
        }
        wrapper:nth-of-type(1) > div:nth-child(3){
            animation-name: leftToRight, pinkYellowBlue;
            animation-duration: 3s;
        }

⌨️ 문법

{animation-name: leftToRight;
animation-duration: 3s;
}

• 2개는 기본으로 작성되어야 함
• animation-name: keyframes name
• animation-durationton: 1번 움직일 때 시간

animation-iteration-count

        wrapper:nth-of-type(2) > div:nth-child(1){
            animation-name: leftToRight;
            animation-duration: 3s; /* 1번 움직일 때 시간*/
            animation-iteration-count: 1; /* 1회 - 기본값*/
        }
        wrapper:nth-of-type(2) > div:nth-child(2){
            animation-name: leftToRight;
            animation-duration: 3s; 
            animation-iteration-count: 3; /* 3회 반복*/
        }
        wrapper:nth-of-type(2) > div:nth-child(3){
            animation-name: leftToRight;
            animation-duration: 3s;
            animation-iteration-count: infinite; /* 무한반복 */
        }

⌨️ 문법

{animation-iteration-count: 3;}

• animation-iteration-count: 반복횟수
• 1(기본값) ~ infinite

animation-direction

        wrapper:nth-of-type(3) > div:nth-child(1){
            animation-name: leftToRight;
            animation-duration: 3s; 
            animation-direction: normal; /* 진행 정방향 - 기본값 */
        }
        wrapper:nth-of-type(3) > div:nth-child(2){
            animation-name: leftToRight;
            animation-duration: 3s; 
            animation-direction: reverse; /* 진행방향 반대 */
        }
        wrapper:nth-of-type(3) > div:nth-child(3){
            animation-name: leftToRight;
            animation-duration: 3s; 
            animation-direction: alternate; /* 홀수 : 정방향 
                                                짝수 : 역방향*/
            animation-iteration-count: 3; /* 무한반복 */
        }
        wrapper:nth-of-type(3) > div:nth-child(4){
            animation-name: leftToRight;
            animation-duration: 3s; 
            animation-direction: alternate; /*  */
            animation-iteration-count: 4; /* 무한반복 */
        }
        wrapper:nth-of-type(3) > div:nth-child(5){
            animation-name: leftToRight;
            animation-duration: 3s; 
            animation-direction: alternate-reverse; /* 홀수 : 역방향 
                                                        짝수 : 정방향*/
            animation-iteration-count: 4; /* 무한반복 */
        }

⌨️ 문법

{animation-direction: alternate;}

• animation-direction: 진행방향
• normal(기본값): 정방향
• reverse: 역방향
• alternate: 홀수 - 정방향 / 짝수 - 역방향
• alternate-reverse: 홀수 - 역방향 / 짝수 - 정방향

animaiton-play-state

        wrapper:nth-of-type(4) > div{
            animation-name: leftToRight;
            animation-duration: 3s; 
        }
        wrapper:nth-of-type(4) > div:nth-of-type(1):hover{
            animation-play-state: paused; /* 일시정지 */
        }
        wrapper:nth-of-type(4) > div:nth-of-type(2):hover{
            animation-play-state: running;/* 실행 - 기본값 */
        }
        wrapper:nth-of-type(4) > div:nth-of-type(3){
            animation-play-state: paused;
        }
        wrapper:nth-of-type(4) > div:nth-of-type(3):hover{
            animation-play-state: running;
        }

⌨️ 문법

{animation-play-state: paused;}

• animation-play-state: 어떤 event가 있어야 시작할지
• running(기본값): 실행
• paused: 멈춤

animation-fill-mode:none; 다 끝나고난 위치

            animation-name: leftToRight;
            animation-duration: 3s; 
            animation-play-state: paused; /* 대기상태 */
        }
        wrapper:nth-of-type(5) > input:checked ~ div{
            animation-play-state: running; /* 체크시 실행*/
        }
        wrapper:nth-of-type(5) > div:nth-of-type(1){
            animation-fill-mode: none; /* 아무것도 안함 - 기본값 */
        }
        wrapper:nth-of-type(5) > div:nth-of-type(2){
            animation-fill-mode: forwards; 
            /* 대기 : 아무것도 안함
               종료 : 종료 후 마지막 프레임 style 적용 */
        }
        wrapper:nth-of-type(5) > div:nth-of-type(3){
            animation-fill-mode: backwards; 
            /* 대기 : 대기 시 시작 프레임 style 적용
               종료 : 종료 후 기본 style로 복구 */
        }
        wrapper:nth-of-type(5) > div:nth-of-type(4){
            animation-fill-mode: both; 
            /* forwards + backwards
               대기 : 대기 시 시작 프레임 style 적용
               종료 : 료 후 마지막 프레임 style 적용 */
        }

⌨️ 문법

{animation-fill-mode: forwards;}

• animation-fill-mode: 다 끝나고난 위치
• none(기본값): 아무것도 안함
• forwards:
  - 대기: 아무것도 안함
  - 종료: 종료 후 마지막 프레임 style 적용
• backwards:
  - 대기: 대기 시 시작 프레임 style 적용
  - 종료: 종료 후 기본 style로 복구
• both:
  - 대기: 대기 시 시작 프레임 style 적용
  - 종료: 종료 후 마지막 프레임 style 적용