CSS의 애니메이션
Oct 11, 2024 pm 02:12 PMCSS의 애니메이션은 @keyframes와 animation-*의 두 부분으로 구성됩니다.
@keyframes at-규칙
첫 번째 부분에서는 @keyframes를 정의해야 합니다.
이를 통해 애니메이션 지속 시간의 다양한 지점에 적용해야 하는 CSS 스타일을 지정할 수 있습니다.
다른 시점은 % 값으로 지정됩니다. 0~100% 사이에서 오프셋 위치를 원하는 만큼 지정할 수 있습니다.
from은 오프셋 0%에 사용할 수 있으며, to는 오프셋 100%와 동일합니다.
@keyframes anim-name { from { css-style-a } to { css-style-b } }
아래 CSS 스타일은 하나의 속성(배경색)에 대해 세 가지 시점에 대해 지정되었습니다.
@keyframes colorit { 0% { background-color: red; } 50% { background-color: yellow; } 100% { background-color: silver; } }
여러 속성을 지정할 수도 있습니다.
@keyframes colorit { 0% { background-color: red; left: 0px; top: 50px; } 50% { background-color: yellow; left: 50px; top: 75px; } 100% { background-color: silver; left: 200px; top: 25px; } }
animation-* 속성
다음은 애니메이션의 UI/UX를 제공하기 위해 스타일 전환을 수행하는 방법을 제어하는 데 사용할 수 있는 속성 목록입니다.
- 애니메이션 구성
- 애니메이션 지연
- 애니메이션 연출
- 애니메이션 지속 시간
- 애니메이션 채우기 모드
- 애니메이션 반복 횟수
- 애니메이션 이름
- 애니메이션 재생 상태
- 애니메이션 범위
- 애니메이션-범위-끝
- 애니메이션 범위 시작
- 애니메이션-타임라인
- 애니메이션 타이밍 기능
이 하위 속성 각각은 애니메이션의 일부 측면을 설정합니다.
아래는 colorit이라는 이름의 @keyframes가 3초간 실행되도록 정의한 것입니다.
div.box { ... animation-name: colorit; animation-duration: 3s; ... }
모든 하위 속성은 애니메이션 약칭을 사용하여 한 줄에 지정할 수 있습니다.
animation: 3s colorit;
브라우저는 필요한 계산을 수행하고 적절한 애니메이션을 렌더링합니다.
마찬가지로 애니메이션 속성을 사용하면 디자이너가 자신의 비전을 달성할 수 있도록 지연, 타이밍, 횟수(반복), 방향 등을 제어할 수 있습니다.
위 내용은 CSS의 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성

5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교

Codecanyon 2025에 대한 최고의 CSS 애니메이션 및 효과 (무료)
