CSS3 - @keyframes
@keyframes animationname {keyframes-selector {css-styles;}}
값
묘사
animationname
필요합니다.애니메이션의 이름을 정의합니다.
keyframes-selector
필요합니다.애니메이션 길이의 백분율입니다.합법적인 값: 0-100%;from(0%와 동일) to(100%와 동일)
css-styles
필요합니다.하나 이상의 올바른 CSS 스타일 속성입니다.
정의 및 사용
@keyframes 규칙을 통해 애니메이션을 만들 수 있습니다.애니메이션을 만드는 방법은 한 세트의 CSS 스타일을 다른 스타일로 변경하는 것입니다.애니메이션 과정에서 이 CSS 스타일을 여러 번 변경할 수 있습니다.백분율로 변화가 발생하는 시간을 규정하거나 키워드인'from'과'to'를 통해 0%와 100%를 등가한다.0%는 애니메이션의 시작 시간, 100% 애니메이션의 끝 시간입니다.최상의 브라우저 지원을 받으려면 항상 0% 및 100% 선택기를 정의해야 합니다.주석: 애니메이션 속성을 사용하여 애니메이션의 모양새를 제어하고 애니메이션을 선택기와 바인딩합니다.
브라우저 지원
현재 브라우저에서 @keyframes 규칙을 지원하지 않습니다.Firefox는 대신 @-moz-keyframes 규칙을 지원합니다.Opera는 대신 @-o-keyframes 규칙을 지원합니다.Safari와 Chrome는 대신 @-webkit-keyframes 규칙을 지원합니다.
예:
： Internet Explorer 。
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
연속 CSS 애니메이션 구현keyframes를 사용한 css에서의 애니메이션은 gif 이미지의 삽입과 비교하면 읽기 속도도 빠르고, 성능도 좋고, 움직임도 부드럽습니다. gif처럼 어떤 애니메이션으로도 표현할 수있는 것은 아니지만, 1. 출현...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
