[ CSS 응용 ] 화려한 웹 요소를 위한 CSS 애니메이션 전환 효과

 

웹 디자인에서 시각적인 효과는 사용자 경험을 향상시키는 핵심적인 역할을 합니다.

이 글에서는 CSS 애니메이션과 전환 효과를 활용하여

다양한 웹 디자인 아이디어를 소개하고자 합니다.

 

 

 

CSS 애니메이션 예제

---

<style>
    @keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.element { 
    width: 200px;
    height: 200px;
    background: skyblue;
    animation: slide-in 1s ease-in-out;
}
</style>
<div class="element">element</div>

 

위 예제는 왼쪽에서 오른쪽으로 1초 동안 1회 슬라이드 하는 

애니메이션을 적용하는 예시 코드 입니다.

@keyframes 규칙을 사용하여 애니메이션의 키프레임을 정의하고,

animation 속성을 사용하여 요소에 애니메이션을 적용 합니다.

 

 

미리보기

애니메이션을 보시려면 페이지를 새로고침 하세요

 

 

 

다음은 요소의 상태 변화를 부드럽게 전환하기 위해 사용하는 법을 보겠습니다.

<style>
.button { 
    width: 200px;
    height: 200px;
    background: skyblue;
    transition: background-color 0.3s ease-in-out;
}
.button:hover {
    background: yellowgreen;
}
</style>
<div class="button">element</div>

 

위 예제는 "button"이라는 클래스를 가진 객체에 마우스 hover시

배경색상을 바꾸는데 transition을 사용하여 0.3초 동안 바뀌게끔 애니메이션을 부여하였습니다.

만일 transition이 없었다면 마우스를 hover하자마자 바로 배경 색상이 바뀌게 될 것입니다.

 

 

미리보기

 

 

또는 transform 효과와 hover 효과를 섞어서도 만들수 있습니다.

<style>
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.button { 
    width: 200px;
    height: 200px;
    background: skyblue;
    transition: background-color 0.3s ease-in-out;
}
.button:hover {
    background: yellowgreen;
    animation: rotate 2s linear infinite;
}
</style>
<div class="button">element</div>

 

hover 효과시 배경색상 변경과 @keyframes 규칙을 사용해 rotate를 적용한 예시입니다.

 

 

미리보기

 

 

다음은 위 내용을 응용하여 css만을 이용한 슬라이더를 만들어 보겠습니다.

<style>
.slider {
    width: 500px;
    height: 300px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.slide {
    width: 500px;
    height: 300px;
    animation: slide 5s infinite;
}
.item1 {background: skyblue;}
.item2 {background: darkred;}
.item3 {background: forestgreen;}
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    33% {
        transform: translateX(-100%);
    }
    66% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(-200%);
    }
}
</style>
<div class="slider">
    <div class="slide item1"></div>
    <div class="slide item2"></div>
    <div class="slide item3"></div>
</div>

 

사실 완벽한 슬라이더라고 이야기는 할 수 없지만

간단한 이미지를 간단한 css코드만으로 비슷한 효과를 만들수 있습니다.

 

미리보기

 

 

 

CSS 애니메이션과 전환 효과는 웹 디자인에 생동감을 불어넣고

사용자 경험을 향상시키는 강력한 도구입니다.

여러가지 예시와 팁을 활용하여 더욱 생동감 넘치고 창의적인 웹 디자인 구성해보세요.