CSS에서 애니메이션 회전

버튼을 개선하거나, 페이지가 로드되는 동안 시간을 ​​허비하거나, 방문 페이지에 약간의 감각을 더하는 등 애니메이션은 독자의 관심을 유지하고 웹사이트에서 즐겁게 하는 데 효율적입니다.

웹 페이지에 애니메이션 비주얼을 추가하는 방법은 다양하지만 가장 간단한 방법 중 하나는 CSS 애니메이션을 사용하는 것입니다. CSS 애니메이션은 HTML 및 CSS 지식이 조금 더 필요합니다.

작업에 CSS 애니메이션을 사용하려는 경우 시작하기 전에 성공적인 CSS 애니메이션의 몇 가지 예를 살펴보는 것이 좋습니다. 이 추가 연구는 프로젝트에 대한 아이디어를 얻고 이 중요한 기능으로 무엇을 할 수 있는지 보여주는 데 도움이 될 수 있습니다.

CSS 애니메이션을 구성하려면 세 가지가 필요합니다.

• 애니메이션을 적용할 HTML 요소
• 애니메이션을 이 요소에 연결하는 CSS 규칙
• 일련의 키프레임은 애니메이션의 시작과 끝에서 스타일을 지정합니다.

속도 및 지연과 같은 선언을 사용하여 애니메이션을 추가로 조정할 수 있습니다. 이제 CSS에서 회전 애니메이션의 몇 가지 예를 살펴보겠습니다.

CSS 애니메이션을 사용하여 이미지를 지속적으로 회전

이 예제에서 회전하려는 요소에 CSS 명령을 추가합니다. 2s를 조정하여 회전 지속 시간을 늦추거나 가속화하고 애니메이션에서 360도 회전할 수 있습니다.

예시:

<img src="/img/DelftStack/logo.png" class="image_rotate" width="200" height="200" />

.image_rotate {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

출력: 이미지가 완전히 360도 회전됩니다.

다음 예제에서는 이미지와 속성이 포함된 HTML 마크업이 필요합니다. 보시다시피 그림 요소에는 rotate, linear 및 infinite의 세 가지 클래스가 있습니다.

각 클래스는 CSS에 선언 블록이 필요합니다. 애니메이션에서 360도로 회전하고 2s를 수정하여 회전 길이를 늦추거나 빠르게 합니다.

<img src="/img/DelftStack/logo.png" class="rotate linear infinite" width="200" height="200" />

.rotate {
    animation: rotation 4s;
}
.linear {
    animation-timing-function: linear;
}
.infinite {
    animation-iteration-count: infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

출력: 이미지가 완전히 360도 회전됩니다.