CSS 애니메이션과 Transition

CSS 애니메이션과 Transition

CSS 애니메이션과 트랜지션을 사용하면 JavaScript 없이도 부드러운 인터랙션을 구현할 수 있습니다.

Transition (전환)

/* 기본 문법 */
.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}

/* 상세 속성 */
transition-property: transform, opacity;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;

/* 축약형 */
transition: all 0.3s ease-in-out 0.1s;

Animation (키프레임)

/* 키프레임 정의 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 애니메이션 적용 */
.element {
    animation: fadeIn 0.5s ease-out forwards;
}

/* 다중 키프레임 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* 상세 속성 */
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;

타이밍 함수

/* 내장 함수 */
ease        /* 기본값, 부드럽게 */
linear      /* 일정한 속도 */
ease-in     /* 느리게 시작 */
ease-out    /* 느리게 끝 */
ease-in-out /* 느리게 시작하고 끝 */

/* 커스텀 (cubic-bezier) */
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

/* steps (프레임 애니메이션) */
animation: sprite 1s steps(8) infinite;

실전 예시

/* 버튼 호버 효과 */
.btn {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 로딩 스피너 */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 페이드 인 */
.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* 슬라이드 인 */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

성능 최적화

• transform, opacity만 애니메이션 (GPU 가속)


• width, height, top, left 피하기


• will-change 속성 활용

.animated {
    will-change: transform;
}