슬라이드 애니메이션

슬라이드를 넘길 때 시각적 효과가 있으면, 바뀐 슬라이드를 더 명확하게 구분할 수 있습니다.

슬라이드를 담는 div의 fade 클래스는 슬라이드가 전환될 때 투명도를 조절하는 애니메이션 효과를 부여합니다.

먼저 아래 CSS를 보겠습니다.

fade 애니메이션 CSS

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

fade 클래스는 animation-name 속성과 animation-duration 속성을 가집니다.

animation-name은 애니메이션에 사용할 키프레임(간단히 말해, 애니메이션의 각 단계)의 이름을 지정합니다. 이 경우에는 fade라는 키프레임을 사용했습니다.

animation-duration은 애니메이션이 한 번 재생되는 데 걸리는 시간을 지정합니다. 여기서는 시간이 1.5초로 설정되어 있습니다.

@keyframes는 키프레임 애니메이션을 정의하는 CSS 규칙입니다. keyframes를 통해 fade라는 이름의 키프레임 애니메이션을 정의했습니다.

from 키워드는 애니메이션의 시작 지점을 의미하며, to 키워드는 애니메이션의 끝 지점을 의미합니다.

애니메이션 키프레임 내에서는 opacity 속성을 사용하여 투명도를 조절했습니다. CSS opacity 속성은 0부터 1까지의 값으로 투명도를 나타내며, 0에 가까울수록 투명하고 1에 가까울수록 불투명합니다.

따라서, .fade CSS 클래스는 클래스가 적용된 요소가 투명도 0.4에서 시작해, 1.5초 후 투명도가 1이 되는 애니메이션 효과를 만듭니다.

이렇게 새로운 슬라이드가 나타날 때, 투명도가 서서히 변하며 자연스럽게 나타나는 효과를 줄 수 있습니다.

다음으로, 캐러셀 버튼의 스타일을 변경해보겠습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!

강의 등록하기로그인하기