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

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

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

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

애니메이션 속성 :

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

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

• 예를 들면 : 이 예에서 요소의 불투명도는 0에서 1로 시작됩니다.
계속되기 전에이 e- 책을 확인하십시오.이 전자 책은 CSS 애니메이션 전문가가 될 것입니다 : >?? CSS 애니메이션 추출물 : 모범 사례, 기술 및 성능 팁
• 간단한 페이딩에서 복잡한 애니메이션에 이르기 까지이 전자 책은 다음을 포함하여 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

그렇습니다.

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

읽어주셔서 감사합니다.

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

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

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

계속 코딩하세요! !

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