CSS 키프레임이란 무엇입니까?

css 키프레임은 CSS 애니메이션 주기의 동작을 정의하는 데 사용할 수 있고 간단한 애니메이션을 만들 수 있는 CSS3의 규칙입니다. 키프레임 규칙은 키워드 "@keyframe"과 애니메이션 이름을 제공하는 식별자로 구성됩니다. .

이 기사의 운영 환경: windows10 시스템, CSS3, thinkpad t480 컴퓨터.

추천: "css 비디오 튜토리얼"

CSS @keyframes가 무엇인가요? 무슨 소용이 있나요?

@keyframes는 CSS 애니메이션 기간의 동작을 정의하고 간단한 애니메이션을 만드는 데 사용할 수 있는 CSS3의 규칙입니다.

애니메이션은 시간에 따른 CSS 속성 변경을 표현한다는 점에서 전환과 유사합니다. 주요 차이점은 속성 값이 변경될 때(예: 마우스 오버 시 속성 값이 변경될 때) 전환이 암시적으로 트리거되지만 애니메이션 속성이 적용될 때 애니메이션이 명시적으로 수행된다는 것입니다. 따라서 애니메이션은 애니메이션 속성에 대한 명시적인 값을 표시해야 합니다. 이 값은 @keyframes 규칙에 지정된 애니메이션 키프레임에 의해 정의됩니다. 따라서 @keyframes 규칙은 시간에 따라 속성 값이 어떻게 변하는지 설명하는 캡슐화된 CSS 스타일 규칙 세트로 구성됩니다.

그런 다음 다양한 CSS 애니메이션 속성을 사용하여 애니메이션 반복 횟수, 시작 값과 종료 값 간 교대 여부, 애니메이션 실행 또는 일시 중지 여부 등 애니메이션의 다양한 측면을 제어할 수 있습니다. 애니메이션의 시작 시간이 지연될 수도 있습니다.

@keyframe 규칙은 "@keyframe" 키워드, 애니메이션 이름을 제공하는 식별자(animation-name을 사용하여 참조됨), 스타일 규칙 세트(중괄호로 구분)로 구성됩니다. 그런 다음 식별자를 animation-name 속성의 값으로 사용하여 애니메이션이 요소에 적용됩니다.

css @keyframes 사용 예:

1. 애니메이션이 발생하는 공간 정의

HTML 코드:

<div class="container">
  <div class="element"></div>
</div>

2. @keyframes 규칙을 사용하여 간단한 애니메이션 만들기

css 코드

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}
.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}
@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

3.

위의 예에서는 "bounce"라는 애니메이션에 5개의 키프레임이 할당되었습니다. 첫 번째와 두 번째 키프레임 사이(예: '0%'와 '25%' 사이)에는 완화 타이밍 기능을 사용합니다. 두 번째와 세 번째 키프레임 사이(예: '25%'~'50%' 사이)에는 Ease-In 타이밍 기능 등을 사용합니다. 요소가 50px 위로 이동하면 효과가 나타나고, 가장 높은 지점에 도달하면 속도가 느려지고, 다시 150px로 떨어지면 속도가 빨라집니다. 애니메이션의 후반부도 비슷한 방식으로 작동하지만 요소를 25px 위로만 이동합니다. 이 애니메이션은 공이 튀는 애니메이션을 시뮬레이션하는 데 사용할 수 있는 튀는 효과를 생성합니다.

참고:

@keyframes 규칙은 계단식으로 적용되지 않으므로 애니메이션은 여러 @keyframes 규칙에서 키프레임을 파생하지 않습니다.

키프레임 세트를 결정하려면 선택기의 모든 값을 시간 증가순으로 정렬해야 합니다. 중복된 항목이 있는 경우(예: 두 개의 '50%' 키프레임 규칙과 선언 블록을 작성한 경우) @keyframes 규칙은 해당 시간에 대한 키프레임 정보를 제공하는 데 마지막 키프레임이 사용되도록 지정합니다. @keyframes 여러 키프레임이 동일한 키프레임 선택기 값을 지정하는 경우 규칙에 계단식이 없습니다.

위 내용은 CSS 키프레임이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!