CSS에서 애니메이션 속성을 구현하는 방법(코드 포함)

이 문서의 내용은 CSS(코드 포함)의 애니메이션 속성 구현 방법에 대한 것입니다. 특정 참조 값이 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

1. CSS 애니메이션 속성은 크기, 수량, 백분율, 위치 및 색상과 같은 한 값에서 다른 값으로 점진적으로 변경될 수 있습니다.

2. 구현 방법:

1. 애니메이션 정의(slideOut은 맞춤 애니메이션 이름)

@-webkit-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}

2. 애니메이션 호출

-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-moz-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-o-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-ms-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	animation: slideOut 0.5s ease-in-out 0.3s backwards;

3. /color/column/filter/flex/font/letter-spacing/line-height/margin/opacity/outline/perspective/text/vertical-align/visibility/word-spacing/z-index 등, 기본적으로 요소는 .

관련 추천:

CSS 애니메이션 - Transition_html/css_WEB-ITnose

css 애니메이션 제작 - CSS animate

위 내용은 CSS에서 애니메이션 속성을 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!