CSS에서 키프레임은 애니메이션 생성을 위한 CSS 규칙인 "키프레임"을 의미합니다. 키프레임은 CSS 애니메이션 주기의 동작을 정의할 수 있습니다. 애니메이션 시퀀스. 중간 단계의 구문은 "@keyframes animation-name {keyframes-selector {css-styles;}}"입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS @keyframes 규칙
@keyframes 규칙은 애니메이션 규칙을 지정하고 CSS 애니메이션 주기의 동작을 정의하는 데 사용됩니다.
애니메이션을 정의하려면 @keyframes 규칙으로 시작해야 합니다. @keyframe 규칙은 "@keyframes" 키워드, 애니메이션 이름을 제공하는 식별자(animation-name을 사용하여 참조됨), 스타일 규칙 세트(중괄호로 구분)로 구성됩니다. 그런 다음 식별자를 "animation-name" 속성의 값으로 사용하여 애니메이션이 요소에 적용됩니다.
구문:
@keyframes animation-name {keyframes-selector {css-styles;}}
설명:
애니메이션을 만드는 원리는 한 CSS 스타일 세트를 다른 스타일 세트로 점진적으로 변경하는 것입니다. 애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다. 변경이 발생하는 시점을 백분율로 지정하거나 0% 및 100%에 해당하는 "from" 및 "to" 키워드를 통해 지정합니다. 0%는 애니메이션의 시작 시간이고, 100%는 애니메이션의 종료 시간입니다. 최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택기를 정의해야 합니다.
참고: 애니메이션 속성을 사용하여 애니메이션 모양을 제어하고 애니메이션을 선택기에 바인딩하세요.
예:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> @import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic); body { background-color: #F5F5F5; color: #555; font-size: 1.1em; font-family: 'Gentium Basic', serif; } .container { margin: 50px auto; min-width: 320px; max-width: 500px; } .text { font-size: 3em; font-weight: bold; color: #0099cc; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-animation: fall 4s infinite; animation: fall 4s infinite; } @-webkit-keyframes fall { from, 15% { -webkit-transform: rotate(0) translateX(0); transform: rotate(0) translateX(0); opacity: 1; -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); } 50%, 60% { -webkit-transform: rotate(90deg) translateX(0); transform: rotate(90deg) translateX(0); opacity: 1; -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1); animation-timing-function: cubic-bezier(.13, .84, .82, 1); } 85%, to { -webkit-transform: rotate(90deg) translateX(200px); transform: rotate(90deg) translateX(200px); opacity: 0; } } @keyframes fall { from, 15% { -webkit-transform: rotate(0) translateX(0); transform: rotate(0) translateX(0); opacity: 1; -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); } 50%, 60% { -webkit-transform: rotate(90deg) translateX(0); transform: rotate(90deg) translateX(0); opacity: 1; -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1); animation-timing-function: cubic-bezier(.13, .84, .82, 1); } 85%, to { -webkit-transform: rotate(90deg) translateX(200px); transform: rotate(90deg) translateX(200px); opacity: 0; } } </style> </head> <body style="text-align: center"> <div class="container"> <p class="text">Falling Text</p> </div> </body> </html>
렌더링:
【추천 튜토리얼: CSS 비디오 튜토리얼】
위 내용은 CSS에서 키프레임은 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!