CSS3 애니메이션 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS3 애니메이션 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-05-25 11:27:34

원래의

6973명이 탐색했습니다.

css3 애니메이션 속성은 6가지 애니메이션 속성을 설정하여 애니메이션 효과를 구현하는 단축 속성입니다. 이러한 6가지 속성은 애니메이션 이름, 애니메이션 시간, 속도 곡선, 애니메이션 지연, 재생 시간 및 애니메이션 역방향 재생 여부입니다.

CSS3 애니메이션 속성을 사용하는 방법

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 애니메이션 속성을 사용하는 방법