애니메이션 동작을 어떻게 만드는지 알아보자. 애니메이션 동작을 알면 웹 사이트의 메뉴를 부드럽게 열 수 있고, 웹 요소를 이동할 수도 있습니다. 예전에는 자바스크립트로 처리했지만 이제는 CSS만으로도 얼마든지 가능합니다.
11-1 변형 알아보기
11-2 트랜지션 알아보기
11-3 애니메이션 알아보기
일반적으로 뭋에의 크기나 형태의 위치를 바꾸는 것을 변형, 또는 트랜스폼(transform)이라고 합니다.
웹 문서에서 CSS 변형을 이용하면 사용자의 동작에 반응해 텍스트나 이미지 등을 움직이게 할 수 있습니다.
개념 : CSS에서 웹 요소에 변형을 적용한다.
기본형 : transform: 함수
2차원 변형 : 웹 요소를 평면에서 변형합니다.
3차원 변형 : x축과 y축에 원근감을 주는 z축을 추가해서 변형합니다.
| 종류 | 설명 |
|---|---|
| translate(tx,ty) | 지정한 크기만큼 x축, y축으로 이동합니다. |
| translateX(tx) | 지정한 크기만큼 x축으로 이동합니다. |
| translateY(ty) | 지정한 크기만큼 y축으로 이동합니다. |
| scale(sx, sy) | 지정한 크기만큼 x축과 y축으로 확대•축소합니다. |
| scaleX(sx) | 지정한 크기만큼 x축으로 확대•축소합니다. |
| scaleY(sy) | 지정한 크기만큼 y축으로 확대•축소합니다. |
| rotate(각도) | 지정한 각도만큼 회전합니다. |
| skew(ax, ay) | 지정한 각도만큼 x축과 y축으로 왜곡합니다. |
| skewX(ax) | 지정한 각도만큼 x축으로 왜곡합니다. |
| skewY(ay) | 지정한 각도만큼 y축으로 왜곡합니다. |
| 종류 | 설명 |
|---|---|
| translate3d(tx,ty, tz) | 지정한 크기만큼 x축, y축, z축으로 이동합니다. |
| translateZ(tz) | 지정한 크기만큼 z축으로 이동합니다. |
| scale3d(sx, sy, sz) | 지정한 크기만큼 x축, y축, z축으로 확대•축소합니다. |
| scaleZ(sz) | 지정한 크기만큼 z축으로 확대•축소합니다. |
| rotate(rx, ry, 각도) | 지정한 각도만큼 회전합니다. |
| rotate3d(rx, ry, rz, 각도) | 지정한 각도만큼 회전합니다. |
| rotateX(각도) | 지정한 각도만큼 x축으로 회전합니다. |
| rotateY(각도) | 지정한 각도만큼 y축으로 회전합니다. |
| rotateZ(각도) | 지정한 각도만큼 z축으로 회전합니다. |
| perspective(길이) | 입체적으로 보일 수 있도록 깊잇값을 지정합니다. |
개념 : translate() 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동합니다.
개념: scale() 함수는 웹 요소를 지정한 크기만큼 확대하거나 축소합니다.
괄호 안의 값(sx, sy, sz)이 1보다 크면 확대되고 1보다 작으면 축소됩니다.
개념: 지정한 각도만큼 오른쪽(시계 방향)이나 왼쪽(시계 반대 방향)으로 요소를 회전
기본형: transform: rotate(각도)
특징: 각도의 값은 일반적인 각도degree나 래디안radian을 사용한다.
회전 각도가 양수일 경우 오른쪽으로 회전하고, 음수일 경우 왼쪽으로 회전합니다.
개념: 지정한 각도만큼 요소를 비틀어 왜곡하빈다. 이때 양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있습니다.
트랜지션에서는 스타일이 바뀌는 시간을 조절하여 자바스크립트를 사용하지 않고도 애니메이션 효과를 낼 수 있다.
트랜지션transition : 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 의미한다.
이렇게 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 트랜지션이라고 합니다.
트랜지션의 속성을 하나하나 알아가보자
| 종류 | 설명 |
|---|---|
| transition-property | 트랜지션의 대상을 지정합니다. |
| transition-duration | 트랜지션을 실행할 시간을 지정합니다. |
| transition-timing-function | 트랜지션의 실행 형태를 지정합니다. |
| transition-delay | 트랜지션의 지연 시간을 지정합니다. |
| trasition | transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한꺼번에 정합니다. |
개념: 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정한다.
기본형: transition-property: all | none | <속성 이름>
transition 속성에서 사용할 수 있는 속성값은 다음과 같다.
| 종류 | 설명 |
|---|---|
| all | all 값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 됩니다. 기본값입니다. |
| none | 트랜지션을 하는 동안 아무 속성도 바뀌지 않습니다. |
| 속성 이름 | 트랜지션 효과를 적용할 속성을 지정합니다. 예를 들어 배경색만 바꿀 것인지, width값을 바 꿀 것인지 원하는 대상만 골라 지정할 수 있습니다. 속성이 여럿일 경우 쉽표(,)로 구분하여 나열합니다. |
개념: 진행 시간을을 지정한다.
지정할 수 있는 시간 단위는 초second 또는 밀리초millisecond
트랜지션의 대상 속성이 여러 개라면 진행 시간도 쉼표(,)로 구분해서 여러 개를 지정할 수 있습니다.
기본형: transition-duration: <시간>
개념: 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있습니다.
속도 곡선은 미리 정해진 키워드나 베지에 곡선을 이용해 표현합니다.
기본형: transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
표11-5 transition-timing-function 속성값
| 종류 | 설명 |
|---|---|
| ease | 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝냅니다. 기본값입니다. |
| linear | 시작부터 끝까지 똑같은 속도로 진행합니다. |
| ease-in | 느리게 시작합니다. |
| ease-out | 느리게 끝냅니다. |
| ease-in-out | 느리게 시작하고 느리게 끝냅니다. |
| cubic-bezier(n, n, n, n) | 베지에 함수를 정의해서 사용합니다. 이때 n값은 0~1 사이만 사용할 수 있습니다. |
개념 : 트랜지션 효과를 언제부터 시작할 것인지 설정
기본형 : transition-delay: <시간>
개념: transition 속성을 한꺼번에 지정한다.
기본형: transition: <transition-property값> | <transition-duration값> | <transition-timing-function값> | <transition-delay값>
특징 : 속성값을 작성하는 순서는 상관이 없으나 시간값을 사용하는 속성이 2개 이므로 시간값이 2개 있다면 앞에 오는 시간값을 transtion-duration 속성, 뒤에 오는 시간값을 transition-delay 속성으로 간주한다.
animation 속성을 이용해 애니메이션을 만들어보자.
animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 `키프레임`keyframe이라고 한다.
| 종류 | 설명 |
|---|---|
| @keyframes | 애니메이션이 바뀌는 지점을 지정합니다. |
| animatio-delay | 애니메이션의 시작 시간을 지정합니다 |
| animation-direction | 애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정합니다. |
| animation-duration | 애니메이션의 실행 시간을 지정합니다. |
| animation-iteration-count | 애니메이션의 반복 횟수를 지정합니다. |
| animation-name | @keyframes로 설정해 놓은 중간 상태를 지정합니다. |
| animation-timing-function | 키프레임의 전환 형태를 지정합니다. |
| animation | animation |
@keyframes <이름> {
<선택자> { <스타일> }
}
특징 : 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구분한다.
기본형 animation-name: <키프레임 이름> | none
0% -> from
100% -> to
개념: 애니메이션을 얼마 동안 재생할 것인지 설정
기본형 animation-duration: <시간>
특징: 초(s)나 밀리초(ms)와 같은 시간 단위, 기본값은 0
개념: 애니메이션은 기본적으로 from에서 to의 방향으로 진행되지만 animation-direction 속성을 통해 진행 방향을 바꿀 수 있습니다.
기본형 animation-direction: normal | reverse | alternate | alternate-reverse
표11-7 animation-direction의 속성값
| 종류 | 설명 |
|---|---|
| normal | 애니메이션을 from에서 to로 진행합니다. 기본값입니다. |
| reverse | 애니메이션을 to에서 from으로, 원해 방향과는 반대로 진행합니다. |
| alternate | 홀수 번째는 normal로, 짝수 번째는 reverse로 진행합니다. |
| alternate-reverse | 홀수 번째는 reverse로, 짝수 번째는 normal로 진행합니다. |
개념: 애니메이션을 반복해서 보여준다.
기본형 animation-iteration-count: <숫자> | infinite
표11-8 animation-iteration-count의 속성값
| 종류 | 설명 |
|---|---|
| 숫자 | 애니메이션의 반복 횟수를 정합니다. |
| infinite | 애니메이션을 무한 반복합니다. |
개념: 트랜지션과 같이 애니메이션의 시작, 중간 끝에서 속도를 지정하여 전체 속도 곡선을 만든다.
기본형 animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
animation 관련 속성 또한 따로 나눠서 설정하는 것이 아니라 한꺼번에 설정할 수도 있다. 주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다는 점이다.
실행시간을 설정하지 않을 경우 기본값으로 0이 설정되어 애니메이션 효과를 볼 수 없다.
기본형 animation: <animation-name> | <animation-duration> |
<animation-timing-function> | <animation-delay> |
<animation-iteration-count> | <animation-direction> |
위의 속성값들을 아래처럼 한번에 표현할 수 있다.