[CSS] CSS 애니메이션 - transform, transition, animation

CSS3 애니메이션

• Transform
• Transition
• Animation

---

1. Transform

- 요소를 회전, 크기 변경 및 각도와 위치 변경 시 사용

- 2D Transform 기본 x, y 두 좌표로만 요소를 변화시켜 2D적인 변화를 가미할 수 있다.

 

📝 Transform 형태

transform: scale() translate() rotate() skew();
/* 공백(스페이스)으로 구분지어 여러 속성들을 함께 사용할 수 있다. */

속성	설명	단위
translate(x,y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼  이동시킨다.	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다.	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다.	px, %, em 등
scale(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배  확대 또는 축소 시킨다. - 1보다 크면 확대, 1보다 작으면 축소	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
skew(x-angle,y-angle)	요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼  기울인다.	+/- 각도(deg)
skewX(x-angle)	요소를 X축으로 x 각도만큼 기울인다. - 양수면 왼쪽이 올라가고 오른쪽이 내려간다.	+/- 각도(deg)
skewY(y-angle)	요소를 Y축으로 y 각도만큼 기울인다. - 양수면 오른쪽이 올라가고 왼쪽이 내려간다.	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다.	+/- 각도(deg)

<style>
    .transition {
        transfrom: rotate(45deg); /* 회전 */
        transform: scale(2,3); /* 확대 축소 */
        transform: skew(10deg, 30deg); /* 비틀기(각도 변경) */
        transform: translate(200px; 100px); /* 위치 변경 */
    }
</style>

 

---

CSS 접두사 (CSS Prefix, webkit, moz, ms, o)

<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은 CSS3의 최신 버전에서만 실행 가능하기 때문에 접두사의 사용으로 각 하위 버전 브라우저의 실행 가능

---

사용예시

 .touch:hover .Mimg {
		transform: scale(2) translate(10px,20px) rotate(75deg) skew(30deg, 10deg) !important;
        /* 
          scale(2) ▶ x축(가로), y축(세로) 2배 확대
          translate(10px,20px) ▶ x축(가로) 10px, y축(세로) 20px 이동
          rotate(75deg) ▶ 시계방향(오른쪽)으로 75도 회전 (마이너스 왼쪽 회전)
          skew(30deg, 10deg) ▶ x축 기준으로 30도, y축 기준으로 10도 비틀기
        */
}

- transform 중첩 적용

---

2. Transition

- 변화하고자 하는 과정을 보여주고자 할 때 사용

 

📝 Transition 형태

transition : property duration timing-funtion delay;
             /* property에 all 주면 다 적용됨! */

속성	설명
transition	모든 transition 속성을 이용한 스타일을 한 줄에 설정
transition-property	효과를 적용할 css 속성
transition-duration	전환(transition) 효과가 지속될 시간을 설정
transition-timing-function	전환(transition) 효과의 시간당 속도를 설정 (linear - ‘일정하게')
transition-delay	전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정 (1s- ‘1초’)

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

---

사용예시

<style>
    .transition {
        transition: width 2s linear 1s;
        /* width 속성 말고 한 번에 효과 적용하고 싶으면 all로 변경 */
    }
    .transition:hover { width: 300px; }
</style>

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

---

3. Animation

- css 스타일을 다른 css 스타일로 변화

- 애니메이션을 나타내는 css 스타일 + @keyframes

 

📝 Animation 형태

animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];

@keyframes 애니메이션이름 {
	0% { 속성: 값; }
	50% { 속성: 값; }
	100% { 속성: 값; }
}

속성	설명	기본값
animation	모든 애니메이션 프로퍼티를 한번에 지정한다. (🔗shorthand syntax)
animation-name	@keyframes 애니메이션 이름을 지정한다	none
animation-duration	한 싸이클의 애니메이션에 소요되는 시간을  초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.	0s
animation-timing-function	애니메이션 효과를 위한 타이밍 함수를 지정한다.	ease
animation-delay	요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.	0s
animation-iteration-count	애니메이션 재생 횟수를 지정한다. (infinite 무한반복)	1
animation-direction	애니메이션이 종료된 이후  반복될 때 진행하는 방향을 지정한다. · normal : 기본값 from(0%) → to(100%) 방향 · reverse : to → from 방향 · alternate : 홀수번째 normal, 짝수번째 reverse · alternate-reverse : 홀수번째 reverse, 짝수번째 normal	normal
animation-fill-mode	애니메이션 미실행 시(종료 또는 대기) 요소의  스타일을 지정한다.	none
animation-play-state	애니메이션 재생 상태(재생 또는 중지)를 지정한다.	running
@keyframes	시간의 흐름에 따라 애니메이션 정의 (from.. to.. 키워드 사용하여 애니메이션 시작과 끝 시점 정의)

---

사용예시

.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; ]
}