애니메이션 속성들

7.1 animation-name 속성

CSS 애니메이션은 동적이고 부드러운 시각 효과를 만들어 사용자 인터페이스를 더욱 인터랙티브하게 만들어줘. 애니메이션 속성을 이용해서 이름, 지속 시간, timing 함수, 지연 등을 제어할 수 있어. 지금부터 이 속성들을 자세히 살펴보고 어떻게 사용하는지 보여줄게.

animation-name 속성은 요소에 적용될 애니메이션의 이름을 정의해. 이름은 @keyframes 규칙에서 정의된 이름과 일치해야 해.

구문:

    
      element {
        animation-name: animation-name;
      }
    
  

어디에:

• animation-name: @keyframes에서 정의된 애니메이션 이름

예시:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

코드 설명:

• @keyframes moveRight: 요소를 오른쪽으로 이동시키는 moveRight라는 이름의 애니메이션 정의
• .box: moveRight 애니메이션이 적용된 요소

7.2 animation-duration 속성

animation-duration 속성은 애니메이션의 지속 시간을 정의해. 값은 초(s) 또는 밀리초(ms)로 표기해.

구문:

    
      element {
        animation-duration: time;
      }
    
  

어디에:

• time: 애니메이션의 지속 시간 (예시: 2s는 2초, 500ms는 500 밀리초)

예시:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

코드 설명:

• animation-duration: 2s: moveRight 애니메이션의 지속 시간을 2초로 설정

7.3 animation-timing-function 속성

animation-timing-function 속성은 시간에 따라 애니메이션의 변화 속도를 정의해. 가속, 감속 같은 다양한 애니메이션 효과를 만들 수 있어.

구문:

    
      element {
        animation-timing-function: function;
      }
    
  

어디에:

• function: 애니메이션의 변화 속도를 정의하는 timing 함수 (예시: ease, linear, ease-in, ease-out, ease-in-out)

예시:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

코드 설명:

• animation-timing-function: ease-in-out: moveRight 애니메이션에 대한 timing 함수를 설정해, 애니메이션이 부드럽게 시작하고 끝나며, 중간에 속도가 빨라짐

주요 timing 함수:

• ease: 애니메이션이 느리게 시작하고, 중간에 빨라졌다가 끝날 때 천천히 감속함
• linear: 애니메이션이 처음부터 끝까지 일정한 속도로 진행됨
• ease-in: 애니메이션이 천천히 시작하고 가속됨
• ease-out: 애니메이션이 빠르게 시작하고 감속됨
• ease-in-out: 애니메이션이 시작과 끝은 느리고 중간에 빠름

7.4 animation-delay 속성

animation-delay 속성은 애니메이션 시작 전에 지연 시간을 설정해. 값은 초(s) 또는 밀리초(ms)로 표기해.

구문:

    
      element {
        animation-delay: time;
      }
    
  

어디에:

• time: 애니메이션 시작 전 지연 시간 (예시: 1s는 1초, 500ms는 500 밀리초)

예시:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

코드 설명:

• animation-delay: 1s: moveRight 애니메이션 시작 전 1초 지연을 설정