CSS Transition & Transform & Animation

04.10.2022 — HTML, CSS — 5 min read

💡 CSS의 Transition, Transform, Animation 예제 정리

개요 🛫

Interative 한 웹 페이지를 만들기 위한 기초인 CSS Transition, Animation을 정리해보자.

사용자의 상호작용에 따라 화려하게 움직이는 웹 사이트를 만들기 위해서는 Javascript 지식이 상당히 필요하지만, 기본적으로 Transition과 Animation을 아는 것만으로도 어느 정도 구현이 가능하다.

이번 포스트에서는 Transition과 Animation의 속성들을 다뤄보도록 하겠다.

학습 내용 📖

Transition

CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) 트랜지션을 얼마나 지속할지, 그리고 (예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 트랜지션을 실행하는지 결정하게 합니다.

Transition의 속성

property
duration

<style>
    .transition {
        transition-property: width;
        transition-duration: 2s;
    }
</style>

.property: 효과를 적용하고자 하는 css 속성 .duration: 효과가 나타나는데 걸리는 시간

timing-function
delay

<style>
    .transition {
        transition-timing-function: linear;
        transition-delay: 1s;
    }
</style>

.timing-function: 효과의 속도 (linear는 ‘일정하게’라는 의미) .delay: 특정 조건 하에서 효과 발동 (1s는 ‘1초 후’라는 의미)

hover

<style>
    .transition:hover { width: 300px; }
</style>

css에서 미리 만들어 놓은 클래스로, 마우스를 올렸을 때라는 조건
Note: **.transition:hover**를 띄어쓰기 없이 작성해야 함

종합 예시

<style>
    .transition {
        transition: width 2s linear 1s;
    }
    .transition:hover { width: 300px; }
</style>

마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안 속도 일정하게 변하는 애니매이션 효과 발동

Transform

CSS 속성을 변경할 때 애니메이션 속도를 조절할 수 있게 한다.

CSS의 속성 변화가 지정한 설정에따라 일어날 수 있게 만들어 준다.

예제

<style>
    .transition {
        transfrom: rotate(45deg);/* 회전 */transform: scale(2,3);/* 확대 축소 */
    }
</style>

.rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능
.scale(x, y): 숫자는 비율의 의미하며 width를 x배, height를 y배 만큼 확대

Point IIskew, translate

<style>
    .transition {
        transform: skew(10deg, 20deg);/* 각도 변경 */transform: translate(100px; 200px);/* 위치 변경 */
    }
</style>

.skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비틂
.translate(x, y): 선택한 오브젝트의 좌표 변경

Point IIIprefix 접두사

<style>
    .transition {
        -webkit-transform: translate(100px, 200px);/* 크롬, 사파리 */
        -mox-transform: translate(100px, 200px);/* 파이어폭스 */
        -ms-transform: translate(100px, 200px ;/* 익스플로러 9.0 */
        -o-transform: translate(100px, 200px);/* 오페라 */
    }
</style>

Transform은 CSS의 최신 버전에서만 실행 가능한 키워드이지만, prefix를 추가하면 하위 버전의 브라우저에서도 실행 가능

Animation

CSS Selector의 종류를 알아보고 예제를 통해 어떻게 적용되는지 확인해보겠다.

예제

.animation {
    animation-name: changeWidth;/* 애니매이션 이름 */animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alternate;
}

@keyframes changeWidth {
    from { width: 300px; }
    to {width: 600px; ]
}

.iteration-count: 애니메이션 반복 횟수
.direction: 애니매이션 진행 방향
1. alternate: from → to → from
2. normal: from → to, from → to
3. reverse: to → from, to → from

4. 애니메이션 응용

Point ITransform & Animation

.box1 {
    animation: rotation 1500ms linear infinite alternate;
}

@keyframes rotation {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}

애니메이션 코드를 한 줄로 작성시, 먼저 나오는 숫자가 **.duration**이고, 나중에 나오는 숫자가 .delay

Point IIprefix 작성시 유의사항

.box1 {
    -webkit-animation: rotation 3s linear 1s 6 alternate;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(-10deg); }
    to {-webkit-transform: rotate(10deg); }
}

prefix가 같은 애니메이션끼리 연동

Review 💡

CSS의 transition & transform & animation을 잘 사용하면 많은 방식의 이미지나 UI를 구현할 수 있을 것 같다.