CSS3에서 애니메이션을 중지하는 방법-CSS 튜토리얼-php.cn

CSS3에서 애니메이션을 중지하는 방법

青灯夜游

풀어 주다： 2022-01-20 16:14:02

원래의

11505명이 탐색했습니다.

CSS3에서는 animation-play-state 속성을 사용하여 실행 중인 애니메이션을 중지할 수 있습니다. 이 속성의 기능은 애니메이션이 실행 중인지 일시 중지되었는지 지정하는 것입니다. "animation-play-state:paused"만 추가하면 됩니다. " 애니메이션이 적용되는 요소에. ;" 스타일이면 충분합니다.

CSS3에서 애니메이션을 중지하는 방법

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

CSS3에서는 animation-play-state 속성을 사용하여 실행 중인 애니메이션 애니메이션을 중지할 수 있습니다.

예: 끊임없이 회전하는 애니메이션이 있습니다.

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 50px auto;
				animation: mymove 1s linear infinite;
			}
			@keyframes mymove {
				100% {
					transform: rotate(360deg);
				}

			}

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

			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

로그인 후 복사

CSS3에서 애니메이션을 중지하는 방법

div 요소의 회전을 중지하려면 div 요소의 animation-play-state 속성을

div {
	width: 100px;
	height: 100px;
	background-color: red;
	margin: 50px auto;
	animation: mymove 1s linear infinite;
	animation-play-state:paused;
}

로그인 후 복사

CSS3에서 애니메이션을 중지하는 방법