CSS3에서 몇 초 후에 재생되도록 애니메이션을 설정하는 방법-프런트엔드 Q&A-php.cn

CSS3에서 몇 초 후에 재생되도록 애니메이션을 설정하는 방법

青灯夜游

풀어 주다： 2022-03-18 16:33:46

원래의

3233명이 탐색했습니다.

CSS3에서는 animation-delay 속성을 사용하여 몇 초 후에 애니메이션이 재생되도록 설정할 수 있습니다. 이 속성은 객체 애니메이션의 지연 시간, 즉 애니메이션이 시작되기 전의 대기 시간을 초 또는 초 단위로 설정할 수 있습니다. 밀리초; "animation-delay: value +unit;" 구문에서 단위는 초(s) 또는 밀리초(ms)일 수 있습니다.

CSS3에서 몇 초 후에 재생되도록 애니메이션을 설정하는 방법

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

CSS3에서는 animation-delay 속성을 사용하여 몇 초 후에 애니메이션이 재생되도록 설정할 수 있습니다.

animation-delay 속성은 객체 애니메이션의 지연 시간을 임의로 검색하거나 설정하는 데, 즉 애니메이션이 시작되는 시점을 정의하는 데 사용할 수 있습니다.

구문:

animation-delay: time;

로그인 후 복사

time: 애니메이션을 시작하기 전에 기다리는 시간을 초 또는 밀리초 단위로 정의합니다. 값 단위는 초 s 또는 밀리초 ms일 수 있습니다. 기본값은 0입니다.

팁: 음수 값도 허용됩니다. -2s를 사용하면 애니메이션이 즉시 시작되지만 2초를 건너뛰고 애니메이션에 들어갑니다.

예: 애니메이션 시작을 5초 지연

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

				/*Safari and Chrome*/
				-webkit-animation: mymove 5s infinite;
				-webkit-animation-delay: 5s;
			}

			@keyframes mymove {
				from {
					left: 0px;
				}

				to {
					left: 200px;
				}
			}

			@-webkit-keyframes mymove

			/*Safari and Chrome*/
				{
				from {
					left: 0px;
				}

				to {
					left: 200px;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

로그인 후 복사

CSS3에서 몇 초 후에 재생되도록 애니메이션을 설정하는 방법