CSS3에서 애니메이션이 끝날 때 사라지지 않는 효과를 얻는 방법-프런트엔드 Q&A-php.cn

CSS3에서 애니메이션이 끝날 때 사라지지 않는 효과를 얻는 방법

WBOY

풀어 주다： 2022-03-29 17:06:50

원래의

2928명이 탐색했습니다.

css3에서는 "animation-fill-mode" 속성을 사용하여 애니메이션이 끝난 후에도 사라지지 않는 효과를 얻을 수 있습니다. 이 속성은 속성이 설정되었을 때 요소의 스타일을 지정할 수 있습니다. 앞으로 이동하면 애니메이션 효과가 사라지지 않습니다. 구문은 "animation -fill-mode:forwards"입니다.

CSS3에서 애니메이션이 끝날 때 사라지지 않는 효과를 얻는 방법

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

css3에서 애니메이션이 끝날 때 사라지지 않는 효과를 얻는 방법

animation-fill-mode 속성은 애니메이션이 재생되지 않을 때(애니메이션이 완료될 때, 또는 애니메이션이 종료될 때) 요소에 적용할 스타일을 지정합니다. 지연이 발생하여 재생이 시작되지 않습니다.)

기본적으로 CSS 애니메이션은 첫 번째 키프레임이 재생될 때까지 요소에 영향을 주지 않으며 마지막 키프레임이 완료된 후에는 요소에 영향을 주지 않습니다. animation-fill-mode 속성은 이 동작을 재정의합니다.

CSS 구문

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

로그인 후 복사

none 기본값입니다. 애니메이션은 애니메이션 실행 전후에 대상 요소에 어떤 스타일도 적용하지 않습니다.
forwards 애니메이션이 끝난 후(animation-iteration-count에 의해 결정됨) 애니메이션은 이 속성 값을 적용합니다.
뒤방향 애니메이션은 애니메이션 지연 정의 중에 애니메이션의 첫 번째 반복을 시작한 키프레임에 정의된 속성 값을 적용합니다. 이는 키프레임(애니메이션 방향이 "normal" 또는 "alternate"인 경우) 또는 키프레임(애니메이션 방향이 "reverse" 또는 "alternate-reverse"인 경우)의 값입니다.
두 애니메이션 모두 앞으로 및 뒤로의 규칙을 따릅니다. 즉, 애니메이션은 애니메이션 속성을 양방향으로 확장합니다.
initial은 이 속성을 기본값으로 설정합니다.
inherit는 상위 요소에서 이 속성을 상속합니다.

예제는 다음과 같습니다.

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:2;
animation-fill-mode:forwards;
/* Safari 和 Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:2;
-webkit-animation-fill-mode:forwards;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>
<div></div>
</body>
</html>

로그인 후 복사

출력 결과:

CSS3에서 애니메이션이 끝날 때 사라지지 않는 효과를 얻는 방법