7주차 - 트랜지션과 애니메이션

트랜지션과 애니메이션

애니메이션 동작을 어떻게 만드는지 알아보자. 애니메이션 동작을 알면 웹 사이트의 메뉴를 부드럽게 열 수 있고, 웹 요소를 이동할 수도 있습니다. 예전에는 자바스크립트로 처리했지만 이제는 CSS만으로도 얼마든지 가능합니다.

11-1 변형 알아보기 11-2 트랜지션 알아보기 11-3 애니메이션 알아보기

11-1 변형 알아보기

일반적으로 뭋에의 크기나 형태의 위치를 바꾸는 것을 변형, 또는 트랜스폼(transform)이라고 합니다. 웹 문서에서 CSS 변형을 이용하면 사용자의 동작에 반응해 텍스트나 이미지 등을 움직이게 할 수 있습니다.

transform과 변형 함수

개념 : CSS에서 웹 요소에 변형을 적용한다. 기본형 : transform: 함수

2차원 변형과 3차원 변형

2차원 변형 : 웹 요소를 평면에서 변형합니다. 3차원 변형 : x축과 y축에 원근감을 주는 z축을 추가해서 변형합니다.

2차원 변형 함수

종류	설명
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축으로 왜곡합니다.

3차원 변형 함수

종류	설명
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() 함수

개념 : translate() 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동합니다.

요소를 확대•축소하는 scale() 함수

개념: scale() 함수는 웹 요소를 지정한 크기만큼 확대하거나 축소합니다. 괄호 안의 값(sx, sy, sz)이 1보다 크면 확대되고 1보다 작으면 축소됩니다.

요소를 회전시키는 rotate() 함수

2차원 rotate() 함수

개념: 지정한 각도만큼 오른쪽(시계 방향)이나 왼쪽(시계 반대 방향)으로 요소를 회전 기본형: transform: rotate(각도) 특징: 각도의 값은 일반적인 각도degree나 래디안radian을 사용한다. 회전 각도가 양수일 경우 오른쪽으로 회전하고, 음수일 경우 왼쪽으로 회전합니다.

3차원 rotate() 함수

요소를 비틀어 왜곡하는 skew() 함수

개념: 지정한 각도만큼 요소를 비틀어 왜곡하빈다. 이때 양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있습니다.

11-2 트랜지션 알아보기

트랜지션에서는 스타일이 바뀌는 시간을 조절하여 자바스크립트를 사용하지 않고도 애니메이션 효과를 낼 수 있다.

트랜지션이란

트랜지션transition : 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 의미한다. 이렇게 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 트랜지션이라고 합니다.

트랜지션과 속성

트랜지션의 속성을 하나하나 알아가보자

종류	설명
transition-property	트랜지션의 대상을 지정합니다.
transition-duration	트랜지션을 실행할 시간을 지정합니다.
transition-timing-function	트랜지션의 실행 형태를 지정합니다.
transition-delay	트랜지션의 지연 시간을 지정합니다.
trasition	transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한꺼번에 정합니다.

트랜지션의 대상을지정하는 transition-property 속성

개념: 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정한다. 기본형: transition-property: all | none | <속성 이름>

transition 속성에서 사용할 수 있는 속성값은 다음과 같다.

종류	설명
all	all 값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 됩니다. 기본값입니다.
none	트랜지션을 하는 동안 아무 속성도 바뀌지 않습니다.
속성 이름	트랜지션 효과를 적용할 속성을 지정합니다. 예를 들어 배경색만 바꿀 것인지, width값을 바 꿀 것인지 원하는 대상만 골라 지정할 수 있습니다. 속성이 여럿일 경우 쉽표(,)로 구분하여 나열합니다.

트랜지션의 진행 시간을 지정하는 transition-duration 속성

개념: 진행 시간을을 지정한다. 지정할 수 있는 시간 단위는 초second 또는 밀리초millisecond 트랜지션의 대상 속성이 여러 개라면 진행 시간도 쉼표(,)로 구분해서 여러 개를 지정할 수 있습니다. 기본형: transition-duration: <시간>

트랜지션의 속도 곡선을 지정하는 transition-timing-function 속성

개념: 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있습니다. 속도 곡선은 미리 정해진 키워드나 베지에 곡선을 이용해 표현합니다. 기본형: 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-delay: <시간>

트랜지션의 속성을 한꺼번에 표기하는 transition 속성

개념: transition 속성을 한꺼번에 지정한다. 기본형: transition: <transition-property값> | <transition-duration값> | <transition-timing-function값> | <transition-delay값>

특징 : 속성값을 작성하는 순서는 상관이 없으나 시간값을 사용하는 속성이 2개 이므로 시간값이 2개 있다면 앞에 오는 시간값을 transtion-duration 속성, 뒤에 오는 시간값을 transition-delay 속성으로 간주한다.

11-3 애니메이션 알아보기

animation 속성을 이용해 애니메이션을 만들어보자.

CSS 애니메이션에서 사용하는 속성

animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 `키프레임`keyframe이라고 한다.

종류	설명
@keyframes	애니메이션이 바뀌는 지점을 지정합니다.
animatio-delay	애니메이션의 시작 시간을 지정합니다
animation-direction	애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정합니다.
animation-duration	애니메이션의 실행 시간을 지정합니다.
animation-iteration-count	애니메이션의 반복 횟수를 지정합니다.
animation-name	@keyframes로 설정해 놓은 중간 상태를 지정합니다.
animation-timing-function	키프레임의 전환 형태를 지정합니다.
animation	animation

애니메이션의 지점과 이름을 설정하는 @keyframes 속성, anumation-name 속성

@keyframes <이름> {
	<선택자> { <스타일> }
}

특징 : 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구분한다. 기본형 animation-name: <키프레임 이름> | none 0% -> from 100% -> to

애니메이션의 실행 시간을 지정하는 animation-duration 속성

개념: 애니메이션을 얼마 동안 재생할 것인지 설정 기본형 animation-duration: <시간> 특징: 초(s)나 밀리초(ms)와 같은 시간 단위, 기본값은 0

애니메이션의 방향을 지정하는 animation-direction 속성

개념: 애니메이션은 기본적으로 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 속성

개념: 애니메이션을 반복해서 보여준다. 기본형 animation-iteration-count: <숫자> | infinite

표11-8 animation-iteration-count의 속성값

종류	설명
숫자	애니메이션의 반복 횟수를 정합니다.
infinite	애니메이션을 무한 반복합니다.

애니메이션의 속도 곡선을 지정하는 animation-timing-function 속성

개념: 트랜지션과 같이 애니메이션의 시작, 중간 끝에서 속도를 지정하여 전체 속도 곡선을 만든다. 기본형 animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

애니메이션의 속성을 한꺼번에 표기하는 animation 속성

animation 관련 속성 또한 따로 나눠서 설정하는 것이 아니라 한꺼번에 설정할 수도 있다. 주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다는 점이다. 실행시간을 설정하지 않을 경우 기본값으로 0이 설정되어 애니메이션 효과를 볼 수 없다.

기본형 animation: <animation-name> | <animation-duration> | <animation-timing-function> | <animation-delay> | <animation-iteration-count> | <animation-direction> |

위의 속성값들을 아래처럼 한번에 표현할 수 있다.