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 중국어 웹사이트의 기타 관련 기사를 참조하세요!