CSS3의 @keyframes 키프레임 애니메이션 선택기 바인딩에 대한 자세한 설명

CSS3에서는 @keyframes를 통해 키프레임 애니메이션 효과를 만들 수 있습니다. @keyframes를 선택기에 바인딩해야 합니다. 그렇지 않으면 효과가 나타나지 않습니다. 동시에 애니메이션 길이와 애니메이션 이름도 정의해야 합니다

문법

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。

CSS3에서는 변경이 발생하는 시간을 백분율로 지정하거나 0%와 100%에 해당하는 "from" 및 "to" 키워드를 통해 지정합니다. 그 중 0%는 애니메이션 시작 시간이고, 100%는 애니메이션 종료 시간입니다.

키프레임 선택기
@keyframes에 몇 가지 애니메이션 규칙을 추가해 보겠습니다.

@keyframes sunrise {   
   0% {   
      bottombottom: 0;   
      left: 340px;   
      background: #f00;   
   }   
  
   33% {   
      bottombottom: 340px;   
      left: 340px;   
      background: #ffd630;   
   }   
  
   66% {   
      bottombottom: 340px;   
      left: 40px;   
      background: #ffd630;   
   }   
  
   100% {   
      bottombottom: 0;   
      left: 40px;   
      background: #f00;   
   }   
}

이 새로운 For animation 규칙을 추가하면 키프레임 선택기를 도입했습니다. 위의 예제 코드에서 0%, 33%, 66%, 100%는 키프레임 선택자입니다. 그 중 0%와 100%는 "from"과 "to"로 대체 가능합니다.
예제의 네 가지 애니메이션 규칙 세트는 이 애니메이션 요소의 네 가지 상태(4개 키 프레임)와 이 네 가지 상태에 있을 때의 스타일을 표현합니다. 이러한 정의되지 않은 상태(예: 34%에서 65%까지)는 정의된 상태 사이의 전환 상태를 구성합니다.
사양은 아직 개정 중이지만 사용자가 준수해야 할 몇 가지 규칙이 있습니다. 예를 들어 키프레임이 기록되는 순서는 중요하지 않으며 백분율의 오름차순으로 재생됩니다. 따라서 "시작" 키프레임 앞에 "대상" 키프레임을 놓으면 애니메이션 재생이 변경되지 않습니다. 또한 해당 비율을 지정하지 않으면 브라우저가 자동으로 추가합니다. 따라서 @keyframes 구문은 일반 CSS 구문의 계단식 적용 범위 규칙을 준수하지 않습니다.

위 내용은 CSS3의 @keyframes 키프레임 애니메이션 선택기 바인딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!