애니메이션 속성을 사용하는 방법 애니메이션 속성에 대한 자세한 설명
- 云罗郡主앞으로
- 2018-11-20 17:01:414511검색
이 글의 내용은 애니메이션 속성을 어떻게 사용하는지에 대한 내용인데, 애니메이션 속성에 대한 자세한 설명이 있어서 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.
animation-duration 속성
CSS3에서는 animation-duration 속성을 사용하여 애니메이션의 지속 시간을 설정할 수 있습니다. 이는 0%에서 100%까지 완료하는 데 걸리는 총 시간입니다. animation-duration 속성은 CSS3 전환의 전환 기간 속성과 유사합니다.
구문:
animation-duration:时间；
설명:
animation-duration 속성 값은 시간이고 단위는 s(초)이며 0.5s와 같은 소수일 수 있습니다.
예:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-duration属性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
100%{-webkit-transform:translateX(100px);}
}
div:not(#container)
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
}
#container
{
display:inline-block;
width:140px;
border:1px solid silver;
}
#div1{-webkit-animation-duration:2s;margin-bottom:10px;}
#div2{-webkit-animation-duration:4s;}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>효과는 다음과 같습니다.
분석:
이 예에서는 #div1의 요소 애니메이션 지속 시간을 2초로 설정하고, #div2의 요소 애니메이션 지속 시간을 4초로 설정했습니다. 온라인 테스트를 통해 효과를 명확하게 확인할 수 있습니다.
CSS3 애니메이션은 CSS3 변환과 결합되어 화려하고 복잡한 애니메이션 효과를 얻는 경우가 많다는 점을 말씀드리고 싶습니다.
이상은 애니메이션 속성 사용법에 대한 전체 소개입니다. CSS3 튜토리얼에 대해 더 자세히 알고 싶다면 PHP 중국어 웹사이트를 주목해주세요.
위 내용은 애니메이션 속성을 사용하는 방법 애니메이션 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 lvyestudy.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제