애니메이션 속성을 사용하는 방법 애니메이션 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

애니메이션 속성을 사용하는 방법 애니메이션 속성에 대한 자세한 설명

云罗郡主

풀어 주다： 2018-11-20 17:01:41

앞으로

4584명이 탐색했습니다.

이 글의 내용은 애니메이션 속성을 어떻게 사용하는지에 대한 내용인데, 애니메이션 속성에 대한 자세한 설명이 있어서 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.

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>

로그인 후 복사

효과는 다음과 같습니다.

애니메이션 속성을 사용하는 방법 애니메이션 속성에 대한 자세한 설명