CSS animation-duration 속성

animation-duration 속성은 애니메이션이 한 주기를 완료하는 데 걸리는 시간을 정의합니다. 지정하지 않으면 애니메이션이 작동하지 않습니다. 이 속성은 애니메이션에서 중요한 역할을 합니다.

animation-duration 속성의 기본값은 0 이며 이는 애니메이션이 즉시 시작됨을 의미합니다. CSS3 속성 중 하나입니다. 기간은 초(s) 또는 밀리초(ms)로 지정할 수 있습니다.

참고: 음수 값은 이 속성에서 유효하지 않으며 무시됩니다.

animation-duration 속성은 다음 값을 허용합니다.

시간

이니셜

상속

animation-duration 속성 특성:

| 초기값 | 0 |
| 적용 | 모든 요소, ::before 및 ::after 의사 요소에도 적용됩니다. |
| 상속 | 아니요 |
| 애니메이션 가능 | 아니요 |
| 버전 | CSS3 |
| 자바스크립트 구문 | object.style.animationDuration = "4s"; |

통사론:


animation-duration: time | initial | inherit;

값:

값
설명

시각
기본값은 0입니다. 애니메이션이 순환하는 데 걸리는 시간을 지정합니다.

초기의
속성이 기본값을 사용하도록 합니다.

계승하다
이는 상위 요소에서 속성을 상속합니다.

animation-duration 속성의 예:

아래 예제 코드에서는 animation-duration 속성을 사용합니다. 어떻게 작동하는지 봅시다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {

        padding: 50px;
        animation: pulse 7s infinite;

      }
      @keyframes pulse {

        0% {

          background-color: #7EE8FA;

        }
        50% {

          background-color: #EEC0C6;

        }
        100% {

          background-color: #9FA4C4

        }
      }
    </style>
  </head>
  <body>

    <div class="element">Background of this text is animated using CSS3 animation property</div>

  </body>
</html>

결과:

위의 코드를 실행하면 아래 이미지와 같이 애니메이션 출력을 얻을 수 있습니다.

animation-duration 속성

지속 시간이 6초인 animation-duration 속성의 예:


<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {

        height: 100%;

        margin: 0;

      }
      body {

        display: flex;

        align-items: center;

        justify-content: center;

      }
      .element {

        height: 200px;

        width: 200px;

        background-color: #7F01FD;

        animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;

      }
      @keyframes nudge {
        0%,
        100% {

          transform: translate(0, 0);

        }
        60% {

          transform: translate(150px, 0);

        }
        80% {

          transform: translate(-150px, 0);

        }
      }
    </style>
  </head>
  <body>

    <div class="element"></div>

  </body>
</html>