한 번만 반복되는 CSS3 애니메이션에는 어떤 속성이 사용됩니까?-프런트엔드 Q&A-php.cn

한 번만 반복되는 CSS3 애니메이션에는 어떤 속성이 사용됩니까?

青灯夜游

풀어 주다： 2022-03-18 15:46:01

원래의

2423명이 탐색했습니다.

css3 애니메이션은 한 번만 반복되며 "animation-iteration-count" 속성으로 설정됩니다. 이 속성의 값이 1이면 애니메이션이 반복되도록 설정할 수 있습니다. 한 번만; "element {animation-iteration" -count:1;}" 구문.

한 번만 반복되는 CSS3 애니메이션에는 어떤 속성이 사용됩니까?

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

css3 애니메이션은 한 번만 반복되며 animation-iteration-count 속성으로 설정됩니다.

animation-iteration-count 속성은 애니메이션 실행 횟수를 지정하고 애니메이션을 재생해야 하는 횟수를 정의할 수 있습니다.

이 속성의 값이 1이면 애니메이션이 한 번만 반복되도록 설정할 수 있습니다.

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 3s;
				animation-iteration-count: 1;

				/* Safari and Chrome */
				-webkit-animation: mymove 3s;
				-webkit-animation-iteration-count: 1;
			}

			@keyframes mymove {
				0% {
					top: 0px;
				}

				50% {
					top: 200px;
				}
				100% {
					top: 0px;
				}
			}

			@-webkit-keyframes mymove{ /* Safari and Chrome */
			
				0% {
					top: 0px;
				}
				
				50% {
					top: 200px;
				}
				100% {
					top: 0px;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

로그인 후 복사

한 번만 반복되는 CSS3 애니메이션에는 어떤 속성이 사용됩니까?