CodeGym/행동/Frontend SELF KO/애니메이션 속성들

애니메이션 속성들

사용 가능

7.1 animation-name 속성

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

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

구문:

element {
  animation-name: animation-name;
}

어디에:

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

예시:

CSS
@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 밀리초)

예시:

CSS
@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)

예시:

CSS
@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 밀리초)

예시:

CSS
@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초 지연을 설정
1
과제
Frontend SELF KO,  레벨 24레슨 1
잠금
애니메이션 타이밍
애니메이션 타이밍
1
과제
Frontend SELF KO,  레벨 24레슨 1
잠금
애니메이션 지연
애니메이션 지연
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다