Animation

Animation :  transition(전환 효과)을 부드럽게 제어

                   특정시점에 대한 설정값을 주어 연속되어 전환되도록 함

 

⏩ @keyframes : 애니메이션이 지정되는 각 단계의 시점에 대한 설정값

     - 이를 적용하려면 animation 속성을 사용해야함

     - animation-name & animation-duration는 함께 사용
     - 생김새

        @keyframes animation-name{

             from { 애니메이션의 시작 상태 }

             to { 애니메이션의 끝 상태 }

        ➡️ 'from' = 0%(애니메이션의 시작), 'to' = 100%(애니메이션의 끝)

        + 애니메이션의 중간 단계도 설정 가능 -> 백분율 사용해 진행 정도 지정

        @keyframes <키 프레임명>{

             0% { css 코드 }

             n% { css 코드 }
             100% { css 코드 }

 

⏩ animation : 단축 속성

     - name duration timing-function delay iteration-count direction fill-mode play-state;

     - [이름] [지속 시간] [속도 조절] [시작 시점 지연] [반복 횟수] [진행 방향] [시작 전&종료 후 상태] [재생 상태]

     - 설명없는 값 (timing-function, delay) 은 transition참조

 

1️⃣ animation-name : 적용하고 싶은 에니메이션의 @keyframes의 이름 지정

          - animation-name:bgchange;

 

2️⃣ animation-duration : 애니메이션의 지속 시간 설정

          - animation-duration:5s;

 

3️⃣ animation-iteraton-count : 애니메이션 실행횟수(반복횟수) 지정
          - animation-iteration-count:3;

          - 정수 값(숫자) : 반복 횟수 지정
          - infinite : 무한 반

 

4️⃣ animation-direction : 애니메이션 실행(진행) 방향 설정

          - .element { animation: animation-name(이름) animation-duration(지속시간) animation-direction(실행방향); }

          - normal : 정방향으로 한 번 실행

          - reverse : 역방향으로 한 번 실행

          - alternate : 정방향으로 한 번 -> 역방향으로 실행 반복

          - alternate-reverse : 역방향으로 한 번 -> 정방향으로 실행 반복

 

5️⃣ animation-fill-mode : 애니메이션의 시작 및 종료 상태에서의 스타일 유지 설정

          - animation-fill-mode:forwards;

          - none : 애니메이션의 시작 & 후 애니메이션이 적용 X

                     => 원래 스타일 유지
          - forwards : 애니메이션 종료 시점의 스타일 적용

                       => 원래 스타일 -> 종료(100%) 스타일
          - backwards : 애니메이션 시작 전 시점의 스타일 적용

                        => 시작(0%) 스타일 -> 원래 스타일
          - both : 애니메이션 시작 전엔 첫 번째 키프레임 스타일, 종료 후엔 마지막 키프레임 스타일 유지

                       => 시작(0%) 스타일 -> 종료(100%) 스타일

 

6️⃣  animation-play-state : 애니메이션의 재생 상태 지정

          - .element { animation-play-state: running | paused; }

          - runnig : 기본 설정

                         실행 중 -> 자동 재생

          - paused : 일시 정지 -> 현재 프레임에서 stop