CSS 애니메이션 - 슬라이드 텍스트

최근에 HTML 문서의 텍스트를 페이드 인 또는 페이드 아웃하는 방법을 보여 드렸습니다. 오늘은 텍스트를 원하는 방향으로 쉽게 슬라이드하는 방법을 보여 드리겠습니다.

오른쪽으로 슬라이드

먼저 다음과 같이 오른쪽으로 슬라이드해 보겠습니다.



코드는 매우 간단합니다.

.ct-slide-right {
    position: relative;
    animation: my_animation 1s;
    animation-fill-mode: both;

}

@keyframes my_animation {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

여기서 잠시 멈추고 여기에 무엇이 있는지 봅시다. 이 코드의 주요 요소는 다음과 같습니다.
animation: my_animation 1s; - 여기에 애니메이션 이름과 지속 시간이 있습니다(이 경우 1초).
@keyframes my_animation - 애니메이션을 정의합니다. 따라서 시작 위치는 왼쪽에서 -300px이고 불투명도는 0입니다. 그런 다음 to 상태로 이동합니다. 이 경우 남은 여백은 0이고 불투명도는 1입니다. 지속 시간은 1초입니다. 불투명도는 약간의 부드러운 노출을 추가합니다.

왼쪽으로 슬라이드

방향을 변경하려면 애니메이션 매개변수에서 left를 right로 변경하십시오.

@keyframes my_animation {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

상단으로 슬라이드

텍스트를 아래에서 위로 이동하려면 동일한 매개변수를 이번에는 bottom로 변경하면 됩니다.

@keyframes animatetop {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

아래쪽으로 밀어넣기

요소를 위에서 아래로 이동하려는 경우 유사하게 bottom를 top로 변경합니다.

@keyframes animatebottom {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

소셜 미디어에서 댓글을 달거나 저를 팔로우해 주시면 감사하겠습니다.



또한 내 웹사이트를 방문할 수 있습니다.

Linux blog

Web Agency website