CSS3 애니메이션 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-01-31 10:24:206981검색
css3 애니메이션 속성은 6가지 애니메이션 속성을 설정하여 애니메이션 효과를 구현하는 단축 속성입니다. 이러한 6가지 속성은 애니메이션 이름, 애니메이션 시간, 속도 곡선, 애니메이션 지연, 재생 시간 및 애니메이션 역방향 재생 여부입니다.
css3 애니메이션 속성
#🎜 🎜 #기능: animation 속성은 6개의 애니메이션 속성을 설정하는 데 사용되는 단축 속성입니다.
구문:
animation: name duration timing-function delay iteration-count direction;
Description: animation 설정할 수 있는 6가지 애니메이션 속성은 다음과 같습니다. # 🎜 🎜#● animation-name: 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다.
● animation-duration: 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.
● animation-timing-function: 애니메이션의 속도 곡선을 지정합니다.
● animation-delay: 애니메이션이 시작되기 전의 지연 시간을 지정합니다.
● animation-iteration-count: 애니메이션을 재생해야 하는 횟수를 지정합니다.
● animation-direction: 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.
참고: animation-duration 속성은 항상 설정되어야 하며, 그렇지 않으면 지속 시간이 0일 때 애니메이션이 재생되지 않습니다.
css3 애니메이션 속성 사용 예<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</body>
</html>렌더링:
# 🎜🎜#
위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! ! 
위 내용은 CSS3 애니메이션 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!