집 > 기사 > 웹 프론트엔드 > CSS3 애니메이션의 관련 속성은 무엇입니까?

CSS3 애니메이션의 관련 속성은 무엇입니까?

青灯夜游원래의: 2022-01-12 17:27:572945검색

애니메이션 관련 속성에는 변형, 변형 원본, 전환, "@keyframes", 애니메이션, 애니메이션 이름, 애니메이션 지속 시간, 애니메이션 지연 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3에는 변환, 전환, 애니메이션

1, 변환(2D/3D 변환 속성)

의 세 가지 애니메이션이 있습니다.

property	description	CSS
transform	적합 2D 또는 3D 변형 요소의 경우	3
transform-origin	변환된 요소 위치를 변경할 수 있습니다	3
transform-style	3D 공간에서 요소를 중첩하는 방법 지정	3
perspective	3D 요소가 원근감으로 표시되는 방식 지정	3
perspective-origin	3D 요소의 하단 위치 지정	3
backface-visibility	정의 요소는 화면을 향하지 않을 때 표시되어야 합니다	3

2. 이 속성 전환은 속성, 전환 기간, 전환 타이밍 기능, 전환 지연의 약식입니다.

3transition-property 전환에 사용되는 CSS 속성을 설정합니다. 3transition-duration전환이 수행되는 시간을 설정합니다. 3transition-timing-function전환 타이밍 기능을 설정합니다. 3transition-delay전환이 시작되는 시간을 지정하세요. 3 속성 설명 CSS





		3, 애니메이션(애니메이션 속성)

@keyframes @keyframes에 의해 정의된 애니메이션 이름인 애니메이션을 정의합니다. animation-name으로 사용됩니다.

3animation복합 속성. 개체에 적용된 애니메이션 효과를 검색하거나 설정합니다. 3animation-name객체에 적용된 애니메이션 이름을 검색하거나 설정합니다. 애니메이션 이름은 @keyframes3animation으로 정의되므로 @keyframes 규칙과 함께 사용해야 합니다. -durationRetrieval 또는 객체 애니메이션의 지속 시간을 설정3animation-timing-function객체 애니메이션의 전환 유형을 검색하거나 설정3animation-delay검색 또는 설정 객체 애니메이션의 지연 시간3animation-iteration-count객체 애니메이션의 루프 수를 검색하거나 설정합니다3animation-direction객체 애니메이션의 이동 여부를 검색하거나 설정합니다. in the loop3animation-play-state객체 애니메이션 상태 검색 또는 설정3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 50px;
				height: 50px;
				background: red;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					width: 150px;
					height: 150px;
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					width: 100px;
					height: 100px;
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

(동영상 공유 학습: )









	예:
css 비디오 튜토리얼

위 내용은 CSS3 애니메이션의 관련 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css css3 count 循环 Property function 对象 transform transition @keyframes animation

성명：

이전 기사：매우 실용적인 33개의 JavaScript 한 줄 코드, 수집하는 것이 좋습니다!다음 기사：매우 실용적인 33개의 JavaScript 한 줄 코드, 수집하는 것이 좋습니다!