CSS3에서 회전 애니메이션을 구현하는 방법-CSS 튜토리얼-php.cn

CSS3에서 회전 애니메이션을 구현하는 방법

青灯夜游

풀어 주다： 2021-12-16 15:13:29

원래의

7849명이 탐색했습니다.

구현 방법: 1. "@keyframes 애니메이션 이름 {50% {transform: 회전(회전 각도);}" 문을 사용하여 회전 애니메이션을 생성합니다. 2. "요소 {애니메이션: 애니메이션 이름 시간 무한;}을 사용합니다. " 문을 회전합니다. 지정된 요소에 애니메이션이 적용됩니다.

CSS3에서 회전 애니메이션을 구현하는 방법

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

css3은 회전 애니메이션을 구현합니다

1. CSS3를 사용하여 애니메이션을 구현하려면 animation 속성과 "@keyframes" 규칙을 사용해야 합니다.

@keyframes는 CSS 애니메이션 주기의 동작을 정의하고 간단한 애니메이션을 만드는 데 사용할 수 있는 CSS3의 규칙입니다.
애니메이션은 시간이 지남에 따라 CSS 속성이 변경되는 것을 표현한다는 점에서 전환과 유사합니다. 주요 차이점은 속성 값이 변경될 때(예: 마우스 오버 시 속성 값이 변경될 때) 전환이 암시적으로 트리거되지만 애니메이션 속성이 적용될 때 애니메이션이 명시적으로 수행된다는 것입니다. 따라서 애니메이션은 애니메이션 속성에 대한 명시적인 값을 표시해야 합니다. 이 값은 @keyframes 규칙에 지정된 애니메이션 키프레임에 의해 정의됩니다. 따라서 @keyframes 규칙은 시간에 따라 속성 값이 어떻게 변하는지 설명하는 캡슐화된 CSS 스타일 규칙 세트로 구성됩니다.
그런 다음 다양한 CSS 애니메이션 속성을 사용하여 애니메이션 반복 횟수, 시작 값과 끝 값을 번갈아 표시하는지 여부, 애니메이션을 실행할지 일시 중지할지 등 애니메이션의 다양한 측면을 제어할 수 있습니다. 애니메이션의 시작 시간이 지연될 수도 있습니다.
구문:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

로그인 후 복사

2. 회전 동작을 제어하려면 "@keyframes" 규칙에 transform: rotate(旋转角度)를 사용하세요.

구현 코드:

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

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}

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

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

로그인 후 복사

CSS3에서 회전 애니메이션을 구현하는 방법