CSS3의 애니메이션 기술 구현 단계

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의 번역 속성에 대한 자세한 소개

CSS3의 필터 속성에 대한 자세한 소개

위 내용은 CSS3의 애니메이션 기술 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!