수정하기 - CSS에서 애니메이션의 지속 시간을 설정하는 방법은 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

CSS에서 애니메이션의 지속 시간을 설정하는 방법은 `<a href='https://sangseek.com/sangseeks/animation-duration/ko'>animation-duration</a>` 속성을 사용하는 것입니다. 이 속성은 애니메이션이 시작되고 끝나는 데 걸리는 시간을 정의하며, 초(second) 또는 밀리초(millisecond) 단위로 설정할 수 있습니다.            기본 문법    ```css  selector {      animation-name: animationName; /* 애니메이션의 이름 */      animation-duration: time; /* 애니메이션의 지속 시간 */  }  ```           예제    ```css  @<a href='https://sangseek.com/sangseeks/keyframes/ko'>keyframes</a> example {      from {background-color: red;}      to {background-color: yellow;}  }    .box {      width: 100px;      height: 100px;      background-color: red;      animation-name: example;      animation-duration: 4s; /* 애니메이션이 4초 동안 지속됨 */  }  ```    위의 예제에서 `.box` 클래스가 적용된 요소는 애니메이션이 4초 동안 지속되며, 배경색이 빨간색에서 노란색으로 변하게 됩니다.           지속 <a href='https://sangseek.com/sangseeks/시간 단위/ko'>시간 단위</a>    `animation-duration` 속성의 값은 다음과 같은 단위를 사용할 수 있습니다:    -   초 (s)  : 예를 들어, `2s`는 2초를 의미합니다.  -   밀리초 (ms)  : 예를 들어, `500ms`는 0.5초를 의미합니다. 밀리초 단위는 더 짧은 애니메이션을 설정할 때 유용합니다.           여러 애니메이션 설정    CSS에서는 여러 애니메이션을 동시에 적용할 수 있으며, 각 애니메이션마다 지속 시간을 다르게 설정할 수 있습니다. 이 경우 `animation` 속성을 사용하여 여러 값을 한 줄로 설정할 수 있습니다.    ```css  .box {      animation: example 4s <a href='https://sangseek.com/sangseeks/ease-in-out/ko'>ease-in-out</a>, anotherAnimation 2s linear;  }  ```    위의 코드에서 `.box` 요소는 `example` 애니메이션이 4초 동안 ease-in-out 방식으로 실행되며, 동시에 `anotherAnimation` 애니메이션이 2초 동안 linear 방식으로 실행됩니다.           애니메이션 반복 설정    애니메이션의 지속 시간 외에도 애니메이션이 반복되는 횟수를 설정할 수 있습니다. 이를 위해 `animation-iteration-count` 속성을 사용합니다. 이 속성은 애니메이션이 몇 번 반복될지를 설정하며, `infinite` 값을 사용하면 무한 반복이 가능합니다.    ```css  .box {      animation-name: example;      animation-duration: 4s;      animation-iteration-count: infinite; /* 무한 반복 */  }  ```           결론    CSS에서 애니메이션의 지속 시간을 설정하는 것은 매우 간단하며, `animation-duration` 속성을 통해 원하는 시간으로 조정할 수 있습니다. 이 속성을 적절히 활용하면 웹 페이지의 요소에 생동감을 부여하고, 사용자 경험을 향상시킬 수 있습니다. 애니메이션의 지속 시간, 반복 횟수, 그리고 다른 애니메이션 속성들을 조합하여 <a href='https://sangseek.com/sangseeks/다양한 효과/ko'>다양한 효과</a>를 만들어낼 수 있습니다. CSS 애니메이션을 활용하여 더욱 매력적인 웹 디자인을 구현해 보세요!