CSS animation-fill-mode 속성을 사용하는 방법
- (*-*)浩원래의
- 2019-05-28 18:06:043181검색
animation-fill-mode 속성은 애니메이션 재생 전 또는 후에 애니메이션 효과를 표시할지 여부를 지정합니다.
참고: 속성 값은 쉼표로 구분된 하나 이상의 채우기 패턴 키워드입니다.
Grammar
animation-fill-mode : none | forwards | backwards | both;
| 값 #🎜 🎜 # |
설명 |
|
#🎜 🎜 #기본 동작을 변경하지 않습니다. |
|
|
애니메이션이 완료되면 마지막 속성 값을 유지합니다(마지막 키프레임 정의에서). ). |
|
|
animation-delay에서 지정한 시간 동안 애니메이션이 적용되기 전에 애니메이션을 적용합니다. 시작 속성 값(첫 번째 키프레임에 정의됨) |
|
|
앞으로 채우기 모드와 뒤로 채우기 모드가 모두 적용됩니다. |
h1에 대한 패딩을 지정합니다. 요소 패턴:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}위 내용은 CSS animation-fill-mode 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 단어 줄 바꿈 속성을 사용하는 방법다음 기사：CSS 단어 줄 바꿈 속성을 사용하는 방법