CSS에서의 트랜지션과 애니매이션에 대해 알아보자

 

 안녕하세요. 진득코딩입니다.

 

 지난 시간까지 CSS를 사용해서 웹 요소에 시각 효과를 추가하는 방법에 대해 살펴보았습니다.

 이번 시간에는 애니메이션 동작을 어떻게 만드는지 알아보도록 하겠습니다.

 

 애니메이션 동작을 알면 웹 사이트의 메뉴를 부드럽게 열 수 있고, 웹 요소를 이동할 수도 있습니다.

 예전에는 이런 기능을 JavaScript를 사용하여 처리하였지만 이제는 CSS만으로도 가능합니다.

 

 변형

 

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

transform과 변형 함수

 

• CSS에서 변형을 적용하려면 transfrom 속성과 변형 함수 이름을 함께 작성해야 합니다.
  
  

 transform: 함수

 

• translate()는 웹 요소를 이동시키는 변형 함수입니다.
  
  

 .photo { transform: translate( 50px, 100px ); }

 

2차원 변형과 3차원 변형

 

• 2차원 변형은 웹 요소를 평면에서 변형합니다.
  
  
• 평면에서 변형할 때는 2차원 좌표를 사용하는데, x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커집니다.
  
  
• 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형합니다.
  
  
• z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아집니다.
  
  

2차원 변형 함수

 

• 2차원에서 사용하는 변형 함수의 종류를 살펴보겠습니다.
  
  

종류	설명
translate( tx, ty )	지정한 크기만큼 x축, y축으로 이동합니다.
translate( tx )	지정한 크기만큼 x축으로 이동합니다.
translate(  ty )	지정한 크기만큼 y축으로 이동합니다.
scale ( sx, sy )	지정한 크기만큼 x축, y축으로  확대/축소합니다.
scale ( sx )	지정한 크기만큼 x축으로  확대/축소합니다.
scale ( sy )	지정한 크기만큼 y축으로  확대/축소합니다.
rotate (각도)	지정한 각도만큼 회전합니다.
skew ( ax, ay )	지정한 각도만큼 x축과 y축으로 왜곡합니다.
skew ( ax )	지정한 각도만큼 x축으로 왜곡합니다.
skew ( ay )	지정한 각도만큼 y축으로 왜곡합니다.

 

3차원 변형 함수

 

• 2차원 변형 함수에 z축을 추가하면 3차원 변형 함수가 됩니다.
  
  

종류	설명
translate3d( tx, ty, tz )	지정한 크기만큼 x축, y축, z축으로 이동합니다.
translateZ( tz )	지정한 크기만큼 z축으로 이동합니다.
scale ( sx, sy, sz )	지정한 크기만큼 x축, y축, z축으로  확대/축소합니다.
scale ( sz )	지정한 크기만큼 z축으로  확대/축소합니다.
rotate ( rx, ry, 각도)	지정한 각도만큼 회전합니다.
rotate3d ( rx, ry, rz, 각도)	지정한 각도만큼 회전합니다.
rotateX (각도)	지정한 각도만큼 X축으로 회전합니다.
rotateY (각도)	지정한 각도만큼 Y축으로 회전합니다.
rotateZ (각도)	지정한 각도만큼 Z축으로 회전합니다.
perspective (길이)	입체적으로 보일 수 있도록 깊잇값을 지정합니다.

 

translate() 함수

 

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

 transform: translate ( tx, ty ) --> (1)

 transform: translate3d ( tx, ty, tz ) --> (2)

 transform: translateX ( tx ) --> (3)

 transform: translateY ( ty ) --> (4)

 transform: translateZ ( tz ) --> (5)

 

 (1) transform: translate ( tx, ty ) : x축으로 tx만큼, y축으로 ty만큼 이동합니다. tx와 ty 2가지 값을 사용하지만 ty값이 주어지지 않으면 0으로 간주합니다.

 (2) transform: translate3d ( tx, ty, tz ) : x축으로 tx만큼, y축으로 ty만큼, 그리고 z축(앞뒤)으로 tz만큼 이동합니다.

 (3) transform: translateX ( tx ) : x축으로 tx만큼 이동합니다.

 (4) transform: translateY ( ty ) : y축으로 ty만큼 이동합니다.

 (5) transform: translateZ ( tz ) : z축으로 tz만큼 이동합니다. 

 

scale() 함수

 

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

 transform: scale( sx, sy ) --> (1)

 transform: scale3d( sx, sy, sz ) --> (2)

 transform: scaleX( sx ) --> (3)

 transform: scaleY( sx ) --> (4)

 transform: scaleZ( sz ) --> (5)

 

 (1) transform: scale( sx, sy ) : x축으로 sx만큼, y축으로 sy만큼 확대합니다. 값이 하나뿐일 경우에는 x, y에 같은 값을 적용합니다. 예를 들어 scale(2)는 scale( 2 , 2 )와 같은 함수이며, 요소를 2배로 확대합니다.

 (2) transform: scale3d( sx, sy, sz ) : x축으로 sx만큼, y축으로 sy만큼, 그리고 z축으로 sz만큼 확대합니다.

 (3) transform: scaleX( sx ) : x축으로 sx만큼 확대합니다.

 (4) transform: scaleY( sx ) : y축으로 sy만큼 확대합니다.

 (5) transform: scaleZ( sz ) : z축으로 sz만큼 확대합니다.

 

2차원 rotate() 함수

 

• rotate() 함수는 2차원 회전과 3차원 회전에서 모두 사용할 수 있습니다.
  
  
• rotate() 함수를 2차원에서 사용할 때는 각도만 지정하면 됩니다.
  
  
• 함수는 웹 요소를 지정한 각도만큼 오른쪽 (시계 방향) 이나 왼쪽(시계 반대 방향)으로 회전시킵니다. 
  
  

 transform: rotate(각도)

 

• rotate() 함수에서 지정할 수 있는 각도의 값은 일반적인 각도(degree)나 래디안(radian)을 사용하는데, 이때 1래디안은 180 ° / π를 의미합니다.
  
  
• 회전 각도가 양수일 경우 오른쪽으로 회전하고, 음수일 경우 왼쪽으로 회전합니다.
  
  

3차원 rotate() 함수

 

• 3차원 rotate() 함수는 x축이나 y축, z축을 기준으로 회전시킵니다.
  
  

 transform: rotate( rx, ry, 각도 )

 transform: rotate3d( sx, sy, sz, 각도 )

 transform: rotateX( 각도 )

 transform: rotateY( 각도 )

 transform: rotateZ( 각도 )

 

• perspective 속성을 함께 사용해서 원근감을 추가해 주면 회전 형태를 입체적으로 표현할 수 있습니다.
  
  
• perspective 속성은 3차원 변형에서 사용하는데, 원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향으로 잡아당기거나 밀어내어 원근감을 표현합니다.
  
  
• perspective 속성에서 사용하는 값은 0보다 커야 하며, 원래 있던 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지를 픽셀 크기로 나타냅니다.
  
  
• 값이 클수록 사용자로부터 멀어집니다.
  
  
• 이때 perspective 속성은 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 합니다.
  
  

 ex)
 <div class = "origin">
   <div id = "rotatex"></div>
 </div>

 

skew() 함수

 

• skew() 함수는 지정한 각도만큼 요소를 비틀어 왜곡합니다.
  
  
• 양쪽 방향으로 비틀거나 한 쪽 방향으로만 비틀 수도 있습니다.
  
  

 transform: skew( x각도, y각도 ) --> (1)

 transform: skewX ( x각도 ) --> (2)

 transform: skewY ( y각도 ) --> (3)

 

 (1) transform: skew( x각도, y각도 ) : 첫 번째 값은 x축을 기준으로 비트는 각도이고, 두 번째 값은 y축을 기준으로 비트는 각도입니다. 두 번째 값이 주어지지 않으면 y축 각도를 0으로 간주합니다.

 (2) transform: skewX ( x각도 ) : x축을 기준으로 주어진 각도만큼 비틉니다.

 (3) transform: skewY ( y각도 ) : y축을 기준으로 주어진 각도만큼 비틉니다.

 

• skewX () 함수는 각돗값이 양수면 왼쪽이 올라가고 오른쪽이 내려가는 형태가 됩니다.
  
  
• skewY () 함수는 각도값이 양수면 오른쪽이 올라가고 왼쪽이 내려가는 형태입니다.
  
  

트랜지션

 

• 트랜지션(transition)은 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말합니다.
  
  
• 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 트랜지션이라고 합니다.
  
  
• 트랜지션은 마이크로소프트 엣지와 인터넷 익스플로러 10 이상에서 지원되며, 대부분의 최신 브라우저에서는 모두 지원됩니다.
  
  

트랜지션과 속성

 

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

 

transition-property 속성

 

• transition-property 속성은 트랜지션의 대상을 지정하는 속성입니다.
  
  

 transition-property: all ¦ none ¦ <속성 이름>

 

• transition 속성에서 사용할 수 있는 속성값에 대해 알아보도록 하겠습니다.
  
  

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

 

transition-duration 속성

 

• transition-duration 속성은 트랜지션의 진행 시간을 지정하는 속성입니다.
  
  
• 지정할 수 있는 시간 단위는 초(second), 또는 밀리초(millisecond)입니다.
  
  
• 트랜지션의 대상 속성이 여러 개라면 진행 시간도 쉼표(,)로 구분해서 여러 개를 지정할 수 있습니다.
  
  
• 음숫값을 지정하면 0으로 간주합니다.
  
  

 transition-duration: <시간>

 

• transition-property 속성에서 지정한 개수와 transition-duration 속성에서 지정한 개수가 다를 경우 속성 순서대로 시간값을 반복해서 적용합니다.
  
  

transition-timing-function 속성

 

• transition-timing-function 속성을 사용하면 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있습니다.
  
  
• 속도 곡선은 미리 정해진 키워드나 배지에 곡선을 이용해 표현합니다.
  
  
• 배지에 곡선은 n개의 점을 이용해 (n-1)차 곡선을 만들어 내는 함수입니다.
  
  

 transition-timing-function: linear ¦ ease ¦ ease-in ¦ ease-out ¦ ease-in-out ¦ cubic-bezier( n, n, n, n )

 

• transition-timing-fucntion 속성값에 대해 살펴보겠습니다.
  
  

종류	설명
ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝냅니다. 기본값입니다.
linear	시작부터 끝까지 똑같은 속도로 진행합니다.
ease-in	느리게 시작합니다.
ease-out	느리게 끝냅니다.
ease-in-out	느리게 시작하고 느리게 끝냅니다.
cubic-bezier(n, n, n, n)	배지에 함수를 정의해서 사용합니다. 이때 n값은  0 ~ 1 사이만 사용할 수 있습니다.

 

• 예를 들어 처음부터 끝까지 일정한 속도로 트랜지션을 진행하려면 다음과 같이 속성값을 linear로 지정합니다.
  
  

 transition-timing-function: linear;

 

transition-delay 속성

 

• transition-delay 속성은 트랜지션 효과를 언제부터 시작할 것인지 설정합니다.
  
  
• 이 속성을 사용하면 지정한 시간만큼 기다렸다가 트랜지션이 시작됩니다.
  
  
• 사용할 수 있는 값은 초(s)나 밀리초(ms)이며, 기본값은 0입니다.
  
  

 transition-delay: <시간>

 

transition 속성

 

• transition 속성은 트랜지션의 속성을 한꺼번에 표기하는 속성입니다.
  
  
• 트랜지션의 적용 대상이 전체이고 각각의 진행 시간이 같다면 transition 속성으로 한꺼번에 지정하는 것이 편리합니다.
  
  

 transition: <transition-property값> ¦ <transition-duration값> ¦ <transition-timing-function값> ¦ <transition-delay값>

 

• 속성값을 작성하는 순서는 상관이 없습니다.
  
  
• 다만 시간값을 사용하는 속성이 2개(진행 시간, 지연 시간)이므로 시간값이 2개 있다면 앞에 오는 시간값을 transition-duration 속성으로, 뒤에 오는 시간값은 transition-delay 속성으로 간주합니다.
  
  

애니메이션 알아보기

 

• CSS3의 animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있습니다.
  
  

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

 

• CSS3의 animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있습니다.
  
  
• animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 합니다.
  
  
• 키프레임은 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정합니다.
  
  
• animation 관련 속성을 표로 정리해서 살펴보도록 하겠습니다.
  
  

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

 

@keyframes 속성, anmation-name 속성

 

• @keyframe 속성을 이용하여 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분을 설정할 수 있습니다.
  
  

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

 

• 또한 웹 문서에서는 이름을 이용해 애니메이션을 구별합니다.
  
  
• 이때 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분할 수 있습니다.
  
  

 animation-name: <키프레임 이름> ¦ none

 

• @keyframes 속성에서 사용하는 선택자는 스타일 속성값이 바뀌는 지점을 가리킵니다.
  
  
• 예를 들어 애니메이션의 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50% 위치에 키프레임을 추가하면 됩니다.
  
  
• 시작과 끝 위치만 사용하려면 0%, 100%와 같은 값 대신 from과 to라는 키워드를 사용해도 됩니다.
  
  

animation-duration 속성

 

• animation-duration 속성은 애니메이션을 얼마 동안 재생할 것인지 설정합니다.
  
  

 animation-duration: <시간>

 

• animation-duration 속성에서 사용할 수 있는 값은 초(s)나 밀리초(ms)와 같은 시간 단위입니다.
  
  
• 기본값은 0이므로 animation-duration 속성밧을 정하지 않으면 애니메이션은 실행되지 않습니다.
  
  

animation-direction 속성

 

• 애니메이션은 기본적으로 keyframes에서 정의한 from에서 to 순서로 진행합니다.
  
  
• 이때 animation-direction 속성을 사용해서 진행 방향을 바꿀 수 있습니다.
  
  

 animation-direction: normal ¦ reverse ¦ alternate ¦ alternate-reverse

 

종류	설명
normal	애니메이션을 from에서 to로 진행합니다. 기본값입니다.
reverse	애니메이션을 to에서 from으로, 원래 방향과는 반대로 진행합니다.
alternate	홀수 번째는 normal로, 짝수 번째는 reverse로 진행합니다.
alternate-reverse	홀수 번째는 reverse로, 짝수 번째는 normal로 진행합니다.

 

animation-iteration-count 속성

 

• animation-iteration-count 속성을 사용해 애니메이션 반복 횟수를 정할 수 있습니다.
  
  

 animation-iteration-count: <숫자> ¦ infinite

 

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

 

animation-timing-function 속성

 

• animation-timing-function 속성을 사용하여 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있습니다.
  
  

 animation-timing-fucntion: linear ¦ ease ¦ ease-in ¦ ease-out ¦ ease-in-out ¦ cubic-bezier( n, n, n, n )

 

animation 속성

 

• animation 속성은 애니메이션의 속성을 한꺼번에 표기하는 속성입니다.
  
  
• 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 합니다.
  
  
• 애니메이션 실행 시간을 지정하지 않으면 기본값으로 0이 적용되어 애니메이션 효과를 볼 수 없기 때문입니다.
  
  

 animation: <animation-name> ¦ <anmation-duration> ¦ <anmation-timing-function> ¦ <animation-delay> ¦ <animation-iteration-count> ¦ <animation-direction>

 

• 예시를 통해 알아보기 위해 먼저 코드를 여러 줄로 작성할 때의 예시를 살펴보겠습니다.
  
  

 .box {
   animation-name: moving;
   animation-duration: 3s;
   animation-timing-fucntion: ease-in;
   animation-direction: alternate;
   animation-iteration-count: infinite;
 }

 

• 위 코드를 animation 속성을 사용하면 다음과 같이 간단하게 작성할 수 있습니다.
  
  

 .box { animation: moving 3s alternate infinite ease-in; }

 

• 쉼표(,)로 구분하여 둘 이상의 애니메이션을 실행할 수도 있습니다.

---

 

 이번 시간에는 CSS로 애니메이션을 실행하는 방법에 대해 살펴보았습니다.

 

 원래는 자바스크립트로 하는 애니메이션을 CSS로도 구현할 수 있다는 점이 인상 깊었습니다.

 나중에 자바스크립트를 사용하게 되면 자바스크립트가 담당하는 일이 워낙 많기 때문에 이런 간단한 애니메이션 정도는 CSS로 구현해도 좋다고 생각합니다.

 해당 포스팅도 다 외울 필요는 없고 이런 코드들이 있다는 것만 인지한 후 필요할 때 와서 확인하는 것이 좋다고 생각합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 건의하실 사항이 있다면 댓글에 남겨주시면 열심히 답글 남기도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊