집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 기본 애니메이션 개념 익히기

CSS 기본 애니메이션 개념 익히기

Mary-Kate Olsen원래의: 2025-01-25 16:07:07232검색

CSS 애니메이션 : 웹 사이트를 활력과 동적을 제공하는 마술 CSS 애니메이션은 마술과 같아 웹 사이트를 더 활기차고 매력적으로 만듭니다. 애니메이션을 통해 웹 사이트 요소를 쉽게 이동하고 색상을 변경하며 크기를 원활하게 조정할 수 있습니다. 애니메이션을보다 대화식적이고 매끄럽게하려면 먼저 기본 애니메이션 개념을 이해해야합니다. 이 기사에서는 애니메이션의 동작을 제어하기 위해 애니메이션의 기본 규칙과 애니메이션 속성을 배우게됩니다.

시작하자! ? CSS 애니메이션 사용을 시작하려면 두 가지 기본 구성 요소를 이해해야합니다.

@keyframes : 애니메이션의 청사진.

애니메이션 속성 :

애니메이션 설정을 제어합니다.

@keyframes 이것은이 부분이 애니메이션 시작 방법, 중간에서 실행하는 방법 및 애니메이션이 끝나는 방식을 정의 함을 의미합니다. 문법 :

예를 들면 : 이 예에서 요소의 불투명도는 0에서 1로 시작됩니다.
간단한 페이딩에서 복잡한 애니메이션에 이르기 까지이 전자 책은 다음을 포함하여 CSS 애니메이션을 마스터하는 모든 것을 다룹니다. 타이밍 기능 키 프레임 및 애니메이션 프로세스 성능 최적화 현실 세계의 적용 부드러운 CSS 애니메이션을 만들고자하는 개발자. 즉시 사본을 받으세요!

애니메이션 속성 CSS 애니메이션을 사용자 정의하기 위해 각 속성에는 고유 한 속성이 사용되며 애니메이션의 동작을 정의합니다.

애니메이션 속성은 요소에 직접 적용되어 애니메이션의 이름, 지속 시간, 지연, 방향 등을 정의합니다.

문법 :

예를 들면 :

이 예에서 "Box"라는 요소가 먼저 볼 수 있으며 2 초 후에 볼 수 있으므로 매끄럽고 income 효과가 발생합니다.

CSS에는 다음과 같은 애니메이션 속성이 있습니다.

애니메이션-이름 애니메이션 기간 애니메이션 타이밍 기능 애니메이션-지연 애니메이션-격리-카운트 애니메이션 방향 애니메이션-필 모드 애니메이션 플레이-스테이트

이제 각 속성을 이해합시다.

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

애니메이션-이름 기능 :

이 속성은 어떤 @keyframes 애니메이션을 적용 해야하는지 정의하는 데 사용됩니다. 예를 들어 Fadein 또는 Fadeout이라는 두 개의 @keyframes가있는 경우 애니메이션 이름 속성 정의를 사용할 수 있습니다. 문법 :

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

예를 들면 :

애니메이션을 실행하려면 애니메이션 이름 속성이 필요합니다.

애니메이션 기간 기능 :

이 속성은 애니메이션 지속 시간, 즉 애니메이션이 실행되는 데 걸리는 시간을 정의합니다.

애니메이션 기간을 초(s) 또는 밀리초(ms) 단위로 정의할 수 있습니다.

문법:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

예:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

애니메이션 지속 시간을 정의하지 않으면 자동으로 0초(기본값)로 설정되어 애니메이션이 효과적으로 무효화됩니다.

애니메이션 타이밍 기능

기능:

이 속성은 애니메이션의 속도 모드를 정의하는 데 사용됩니다. 즉, 이 속성을 사용하여 애니메이션이 느리게 시작되는지, 일정한 속도로 실행되는지, 빠르게 실행되는지 정의할 수 있습니다.

다음 값을 갖습니다:

선형: 애니메이션이 일정한 속도로 실행됩니다.
ease: 천천히 시작하고, 중간에 빠르게, 천천히 끝납니다.
ease-in: 천천히 시작하세요.
ease-out: 천천히 끝냅니다.
ease-in-out: 느린 시작과 느린 끝.
cubic-bezier(x1, y1, x2, y2): 사용자 정의 속도 모드.

예:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

애니메이션 지연

기능:

이 속성은 애니메이션이 시작되기 전에 기다리는 시간, 즉 애니메이션 지연 시간을 정의합니다.

문법:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

예:

<code>animation-name: animationName;</code>

애니메이션 반복 횟수

기능:

이 속성은 애니메이션의 반복 횟수, 즉 애니메이션이 몇 번 반복되는지 정의하는 데 사용됩니다.

다음 값을 갖습니다:

1: 애니메이션은 한 번만 실행됩니다(기본값).
무한: 애니메이션이 계속 반복됩니다.
수 제한 없음: 정의한 횟수만큼 애니메이션이 실행됩니다.

예:

<code>animation-name: fadeIn;</code>

애니메이션 연출

기능:

이 속성은 애니메이션의 방향을 정의합니다.

다음 값을 갖습니다:

normal: 애니메이션이 앞으로 실행됩니다(기본값).
reverse: 애니메이션이 역방향으로 실행됩니다.
대체: 애니메이션이 앞으로 한 번, 뒤로 한 번 번갈아 실행됩니다.
alternate-reverse: 애니메이션이 먼저 역방향으로 실행된 다음 앞으로 실행됩니다.

예:

<code>animation-duration: time;</code>

애니메이션 채우기 모드

기능:

이 속성은 애니메이션 시작 전과 종료 후 요소의 스타일을 정의하는 데 사용됩니다. 애니메이션이 재생되지 않을 때 요소에 적용되어야 하는 스타일을 정의합니다.

애니메이션 전후의 요소 모양을 제어할 수 있으므로 애니메이션 중에 요소 상태를 더 유연하게 관리할 수 있습니다.

다음 값을 갖습니다:

없음: 애니메이션 전후에 스타일이 적용되지 않습니다.
앞으로: 애니메이션의 끝 스타일을 유지합니다.
뒤로: 지연 시간 내에 애니메이션의 시작 스타일도 적용됩니다.
둘 다: 시작 및 끝 스타일을 처리합니다.

예:

<code>animation-duration: 4s; /* 动画将运行4秒 */</code>

애니메이션 재생 상태

기능:

이 속성은 애니메이션의 상태(실행 중 또는 일시 중지)를 지정합니다.

다음 값을 갖습니다:

running: 애니메이션이 계속됩니다.
일시 중지됨: 애니메이션이 중지되지만 상태는 유지됩니다.

예:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

이 속성은 대화형 애니메이션(예: 마우스 오버 시 애니메이션 일시 중지)에 사용됩니다.

애니메이션 약어 구문

애니메이션 단축을 사용하면 한 줄에 여러 애니메이션 속성을 정의할 수 있습니다. 각 애니메이션 속성을 하나씩 작성하는 대신 가독성을 높이기 위해 한 줄로 결합할 수 있습니다.

문법:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

예:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

여기

슬라이드: 애니메이션의 이름입니다.
3초: 애니메이션 지속 시간은 3초입니다.
ease-in-out: 시간 제한 기능은 easy-in-out입니다. 즉, 애니메이션이 천천히 시작하고 속도가 빨라졌다가 다시 느려집니다.
1s: 1초 지연 후 애니메이션이 시작됩니다.
infinite: 애니메이션이 무한히 반복됩니다.
대체: 각 반복마다 애니메이션이 앞뒤로 번갈아 이동합니다.
앞으로: 마지막 키프레임(100%)에 적용된 스타일은 애니메이션이 완료된 후에도 유지됩니다.

애니메이션 요약본

CSS 애니메이션에 사용되는 모든 주요 개념, 속성 및 구문을 다루는 포괄적인 CSS 애니메이션 치트 시트를 만들었습니다.

아래 링크를 클릭하면 GitHub에서 치트 시트를 다운로드할 수 있습니다.

https://www.php.cn/link/02f5df8adf0db026d38425594e68a007

Mastering CSS Basic Animation Concepts

그렇습니다.

도움이 되었으면 좋겠습니다.

읽어주셔서 감사합니다.

제 기사가 도움이 되었고 제 작업을 지원하고 싶으시면 커피 한 잔 사주시는 것을 고려해 보세요.

이와 같은 더 많은 콘텐츠를 보려면 여기를 클릭하세요.

X(Twitter)에서 저를 팔로우하시면 일상적인 웹 개발 팁을 받아보실 수 있습니다.

계속 코딩하세요! !

위 내용은 CSS 기본 애니메이션 개념 익히기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css count function animation github https 性能优化

성명：

이전 기사：Div를 과도하게 사용하지 마세요! 시맨틱 HTML 모범 사례에 대한 실용 가이드다음 기사：Div를 과도하게 사용하지 마세요! 시맨틱 HTML 모범 사례에 대한 실용 가이드