CSS3에서 애니메이션 효과를 구현하려면 변환 원점, 전환, 전환 지연 및 전환 타이밍 기능이라는 세 가지 기술이 사용됩니다. 오늘은 명확한 아이디어를 제공하고 애니메이션 효과를 구현하는 방법을 살펴보겠습니다.
1.transform-origin
CSS 변환의 원점, 기본값은 객체의 중심점입니다. 변환 원본은 백분율, em, px 등과 같은 특정 값 또는 왼쪽, 오른쪽, 중앙, 위쪽, 중간, 아래쪽 등과 같은 키워드일 수 있는 두 개의 매개 변수를 허용합니다.
예:
transform-origin: 오른쪽 위;-o-transform-origin: 오른쪽 위;-moz-transform-origin: 오른쪽 위;-webkit-transform-origin: 오른쪽 위;
transform-origin: 0 0;-o-변형-원산지: 0 0;-moz-변형-원산지: 0 0;-webkit-변형-원산지: 0 0;
변형-원산지: 0 100%;-o-변형-원산지: 0 100%;-moz-변환-원산지: 0 100%;-webkit-변환-원산지: 0 100%;
변형-원산지: 50% 100%;-o-변환-원산지: 50% 100%;- moz -transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;
2. Transition--Transition
1.transition-property: 변환 애니메이션의 CSS 속성 이름을 정의합니다. 없음|모두|CSS 속성 목록일 수 있습니다.
예:
transition-property:배경색;-o-transition-property:배경-색상;-moz-transition-property:배경색;-webkit-transition-property:배경색;
2 .transition-duration: 전환 애니메이션의 지속 시간을 정의합니다.
예:
transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;
3.transition-delay: 전환 정의 애니메이션 지연 시간.
예:
transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;
4.transition-timing-function: 정의 전환 애니메이션의 효과입니다.
값은 다음과 같습니다:
ease: 완화 효과.
ease-in: 점진적인 효과.
ease-out: 페이드 효과.
ease-in-out: 페이드 인 및 페이드 아웃 효과.
선형: 선형 효과.
cubic-bezier: 특수한 3차 베지어 곡선 효과. 3차 베지어(0.3, 0, 0.5, 1.0).
예:
전환 타이밍 기능: 선형; -moz-전환 타이밍 기능: 선형;
三, animation
1.animation-name: 애니메이션 이름.
2.animation-duration: 애니메이션 시간.
3.animation-timing-function: 애니메이션 재생 방법.
4.animation-delay: 애니메이션 시작 시간.
5.animation-iteration-count: 재생 횟수. 무한은 무한한 시간을 의미합니다. .
6.animation-direction: 애니메이션 재생 방향. 일반 - 애니메이션의 각 주기는 짝수 번 앞으로, 홀수 번 뒤로 번갈아 진행됩니다.
예:
div { -webkit-transform-style: preserve-3d; -webkit-animation-name: ani; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } /* 下面调用动画 */ @-webkit-keyframes ani { 0% { -webkit-transform: rotateX(0deg); } 25% { -webkit-transform: rotateX(180deg); } 50% { -webkit-transform: rotateX(360deg); } 75% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); }
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
관련 자료:
CSS3의 background-size 속성에 대한 자세한 소개
위 내용은 CSS3의 애니메이션 기술 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!