[Do it! HTML+CSS+자바스크립트]트랜지션과 애니메이션

22.12.20 배운 내용 정리1
트랜지션과 애니메이션(변형 알아보기, 트랜지션 알아보기, 애니메이션 알아보기)

 

변형 알아보기

 

① transform과 변형 함수

CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 함.

기본형 : transform: 함수

 

웹 요소를 이동시키는 변형 함수는 translate( )임.

ex. 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용함.

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

 

(1) 2차원 변형과 3차원 변형

2차원 변형은 웹 요소를 평면에서 변형함. 예를 들어 수평 방향으로 이동하거나 수직 방향으로 왜곡함.

이렇게 평면에서 변형할 때는 2차원 좌표를 사용하는데,

x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커짐.

반면에 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형함.

3차원 변형에서 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차원 변형 함수

2차원 변형 함수에 z축을  추가하면 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축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동함.

기본형 : transform: translate(tx, ty)            //x축으로 tx만큼, y축으로 ty만큼 이동함. ty값이 주어지지 않으면 0으로 간주

              transform: translate3d(tx, ty, tz)   //x축으로 tx만큼, y축으로 ty만큼, z축(앞뒤)으로 tz만큼 이동함.

              transform: translateX(tx)               //x축으로 tx만큼 이동함.

              transform: translateY(ty)               //y축으로 ty만큼 이동함.

              transform: translateZ(tz)               //z축으로 tz만큼 이동함.

 

※ translate( ) 함수를 사용해 웹 요소 이동하기

translate( ) 함수를 이용해 사용자가 도형 위로 마우스 포인터를 올려놓으면 x축 또는 y축으로 이동하고,

또는 x축과 y축으로 동시에 이동함.

(x축은 +값이면 오른쪽으로 이동하고, y축은 +값이면 아래쪽으로 이동함.)

 

 

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

scale( ) 함수는 웹 요소를 지정한 크기만큼 확대하거나 축소함.

scale( ) 함수를 사용하는 형식은 다음과 같으며, 괄호 안의 값이 1보다 크면 확대되고, 작으면 축소됨.

기본형 : transform: scale(sx, sy)                //x축으로 sx만큼, y축으로 sy만큼 확대, 값이 하나뿐일 경우 x, y에 같은 값 적용

              transform: scale3d(sx, sy, sz)       //x축으로 sx만큼, y축으로 sy만큼, z축으로 sz만큼 확대함.

              transform: scaleX(sx)                   //x축으로 sx만큼 확대함.

              transform: scaleY(sy)                   //y축으로 sy만큼 확대함.

              transform: scaleZ(sz)                   //z축으로 sz만큼 확대함.

 

※ scale( ) 함수를 사용해 확대, 축소하기

scaleX( ) 함수를 사용해서 x축으로 2배, scaleY( ) 함수를 사용해서 y축으로 1.5배,

scale( ) 함수를 적용해서 x축과 y축으로 0.7배 확대함. 

 

 

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

(1) 2차원 rotate( ) 함수

요소를 회전시키는 rotate( ) 함수는 2차원, 3차원 회전에서 모두 사용할 수 있음.

rotate( ) 함수를 2차원에서 사용할 때는 각도만 지정하면 됨.

함수는 웹요소를 지정한 각도만큼 오른쪽(시계 방향)이나 왼쪽(시계 반대 방향)으로 회전시킴

기본형 : transform: rotate(각도)

 

rotate( ) 함수에서 지정할 수 있는 각도의 값은 일반적인 각도나 래디안을 사용하는데,

이때 1래디안은 180º/π(파이)를 의미함. 회전 각도가 양수일 경우 오른쪽, 음수일 경우 왼쪽으로 회전함.

 

※ 함수를 사용해 2차원에서 회전하기

rotate( ) 함수를 사용하여 이미지를 오른쪽 40º, 왼쪽 40º만큼 회전함.

 

 

(2) 3차원 rotate( ) 함수

3차원 rotate( ) 함수는 다음과 같이 x축이나 y축, z축을 기준으로 회전시킴.

기본형 : transform: rotate(rx, ry, 각도)                

              transform: rotate3d(rx, ry, rz, 각도)       

              transform: rotateX(각도)                  

              transform: rotateY(각도)                

              transform: rotateZ(각도)   

 

이때 perspective 속성을 함께 사용해서 원근감을 추가해 주면 회전 형태를 입체적으로 표현할 수 있음.

perspective 속성은 3차원 변형에서 사용하는데, 원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향으로

잡아당기거나 밀어내어 원근감을 표현함.

perspective 속성에서 사용하는 값은 0보다 커야 하며, 원래 있던 위치에서 사용자가 있는 쪽으로

얼마나 이동하는지를 픽셀 크기로 나타냄. 값이 클수록 사용자로부터 멀어짐.

이때 주의할 점은 perspective 속성은 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 한다는 것임.

ex. <div class="origin">

         <div id="rotatex"></div>

      </div>

위 소스에서 .origin 요소 안에 있는 #rotatex 요소를 x축으로 회전시키고 그 요소에 입체감을 주고 싶다면

.origin 요소에 perspective 속성을 사용해야 함.

 

※ 이미지 회전하며 원근감 주기

x축을 기준으로 이미지를 회전 시켰을 때와 x축을 기준으로 회전시키는 동시에 perspective: 300px로 원근감을 줌.

 

 

※ rotate( ) 함수를 사용해 3차원에서 회전하기

도형 위에 마우스 포인터를 올리면 x축, y축, z축으로 각각 55º씩 회전하거나

x, y, z축에 방향 *벡터를 지정하고 55º를 회전함.

이때 x, y, z축으로 회전하는 것을 천천히 확인할 수 있도록 트랜지션 효과를 줌.

마지막으로 각 요소에 원근감을 주기 위해 #rotatex, #rotatey, #rotatez, #rotatexyz의 부모요소인

.origin에 perspective 속성을 정의함.

 

*벡터 : 크기와 방향을 나타내는 물리량을 말함. 예를 들어 '가속도'는 크기와 방향이 모두 있는 벡터임.

벡터중에서 방향을 가리키는 벡터를 '방향 벡터'라고 함.

 

 

 

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

skew( ) 함수는 지정한 각도만큼 요소를 비틀어 왜곡함.

이때 양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있음.

기본형 : transform: skew(x각도, y각도)  //x축, y축을 기준으로 주어진 각도만큼 비틂. 두 번째 값 없으면 y축 각도는 0임.

              transform: skewX(x각도)           //x축을 기준으로 주어진 각도만큼 비틂.

              transform: skewY(y각도)           //y축을 기준으로 주어진 각도만큼 비틂.

 

※ skew( ) 함수를 사용해 도형 비틀기

각각의 도형 위에 마우스 포인터를 올리면 x축으로 30º 비틀고, y축으로 15º 비틂.

그리고 마지막은 x축으로 -25º, y축으로 -15º 비틂.

 

 

※ skew( ) 함수를 텍스트 영역에 적용하기

앞에서 알 수 있듯이 skewX( ) 함수는 각돗값이 양수면 왼쪽이 올라가고 오른쪽이 내려가는 형태가 되고,

반대로 skewY( ) 함수는 각돗값이 양수면 오른쪽이 올라가고 왼쪽이 내려가는 형태가 됨.

것을 응용해서 skew( ) 함수를 적용하면 이미지를 사용하지 않고도 도형의 형태를 만들 수 있음.

 

 

---

 

트랜지션 알아보기

 

트랜지션은 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼

스타일 속성이 바뀌는 것을 말함.

 

트랜지션과 속성

 

※ 트랜지션의 속성

 

종류	설명
transition-property	트랜지션의 대상을 지정함.
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값을 바꿀 것인지 원하는 대상만 골라 지정할 수 있음. 속성이 여럿일 경우 쉼표(,)로 구분하여 나열함.

 

ex. transition-property 속성을 이용해 다음과 같이 트랜지션 대상을 지정할 수 있음.

transition-property: all;                           //해당 요소의 모든 속성에 트랜지션 적용

transition-property: background-color;   //해당 요소의 배경색에 트랜지션 적용

transition-property: width, height;           //해당 요소의 너비와 높이에 트랜지션 적용

 

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

transition-duration 속성으로 진행 시간을 지정해야 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있음.

지정할 수 있는 시간 단위는 초, 또는 밀리초임.

트랜지션의 대상 속성이 여러 개라면 진행 시간도 쉼표(,)로 구분해서 여러 개를 지정할 수 있음.

(음숫값을 지정하면 0으로 간주함.)

기본형 : transition-duration: <시간>

 

※ 트랜지션 대상과 진행 시간 지정하기

높잇값은 1초, 너빗값은 2초에 걸쳐 바뀌게 함.

(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-function 속성값

 

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

 

④ 트랜지션의 지연 시간을 설정하는 transition-delay 속성

transition-delay 속성은 트랜지션 효과를 언제부터 시작할 것인지 설정함.

이 속성을 사용하면 지정한 시간만큼 기다렸다가 트랜지션이 시작됨.

사용할 수 있는 값은 초(s)나 밀리초(ms)이며, 기본값은 0임.

기본형 : transition-delay: <시간>

 

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

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

기본형 : transition: <transition-property값> | <transition-duration값> |

             <transition-timing-function값> | <transition-delay값>

 

속성값을 작성하는 순서는 상관이 없음. 다만 시간값을 사용하는 속성이 2개(진행 시간, 지연시간)이므로

시간값이 2개 있다면 앞에 오는 시간값을 transition-duration 속성으로,

뒤에 오는 시간값은 transition-delay 속성으로 간주함.

 

※ 트랜지션 속성 한꺼번에 지정하기

2초동안 ease-in 트랜지션을 실행함. 트랜지션 대상을 지정하지 않았으므로 기본값인 all이 적용됨.

CSS에서 지정한 모든 속성, 즉 여기에서는 width와 height, background-color, transform이 트랜지션 대상임.

사각형 위로 마우스 포인터를 올리면 270º 회전하면서 2초 동안 너빗값과 높잇값이 커지고 배경색이 바뀜.

 

왼쪽에서 오른쪽으로 변함

 

마우스 오버하면 상품 정보 표시하기

 

① HTML 파일 살펴보기

파일을 열어보면 상품 이미지 아래에 상품 설명 글이 간단히 표시되어 있음.

 

 

② CSS 파일 수정하고 저장하기

먼저 상품 설명 글이 처음에는 보이지 않도록 .caption 스타일의 불투명도를 0으로 지정함.

그리고 나중에 설명 글이 표시될 때 자연스럽게 나타나도록 트랜지션을 사용함.

 

 

이때 중요한 점은 position: absolute를 정확하게 적용하려면 부모 요소에 position: relative를 추가해야 함.

여기에서 .caption 요소의 부모 요소는 <li> 태그임.

그러로 CSS 파일에서 다음과 같이 li에 position: relative 속성을 추가해야함.

 

 

수정한 CSS 파일을 저장하고 웹 브라우저에서 파일을 확인해 보면 상품 설명글이 보이지 않음.

하지만 설명 글은 화면에서만 보이지 않을 뿐 실제로는 브라우저에 남아 있음.

크롬 개발자 도구창에서 <div class="caption"> 부분을 검사하면 영역을 차지하고 있는 것을 확인할 수 있음.

 

 

③ 마우스 포인터를 올리면 상품 설명 글 보여 주기

상품 항목 위에 마우스 포인터를 올리면 상품의 설명 글이 이미지 위로 이동하도록 만들기 위해선

변형 함수 translateY( )를 이용해 상품 설명 글을 위로 이동하고, opacity 속성값을 1로 수정하여 감췄던 텍스트를 보여 줌.

다음 코드를 CSS 파일 하단에 추가하면 되는데 이때 설명 글의 배경이 어두운 색이므로

.caption 요소의 글자색을 흰색으로 바꾸고 텍스트를 가운데로 정렬하는 것까지 추가해주는 것이 좋음.

 

 

수정한 CSS 코드를 저장하고 웹 브라우저에서 파일을 확인해보면

상품 이미지 위로 마우스 포인터를 올려놓으면 반투명한 검은색 배경이 있는 설명 글이 화면 위에 나타나고,

마우스 포인터를 내리면 설명글도 사라짐.

 

 

---

 

애니메이션 알아보기

 

CSS의 animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있음.

animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데,

이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 함.

키프레임은 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서

애니메이션의 실행 시간이나 반복 여부 등을 지정함.

 

※ animation의 속성

 

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

 

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

애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정함.

기본형 : @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 속성값을 정하지 않으면 애니메이션은 실행되지 않음.

 

※ 애니메이션의 지점, 이름, 실행 시간 적용하기

@keyframes을 이용해 shape와 rotate라는 애니메이션을 각각 정의하고,

#box1과 #box2에 각각 animation-name: shape와 animation-name: rotate를 사용해 애니메이션을 각각 실행함.

이때 애니메이션 실행 시간은 3초이며, 한 번만 실행하므로 재실행하려면 F5키를 눌러 문서를 다시 불러와야 함.

 

왼쪽에서 오른쪽으로 변함

 

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

애니메이션은 기본적으로 keyframes에서 정의한 from에서 to 순서로 진행하는데

animation-direction 속성을 사용해서 진행 방향을 바꿀 수 있음.

기본형 : animation-direction: normal | reverse | alternate | alternate-reverse

 

※ animation-direction의 속성값

 

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

 

④ 애니메이션의 반복 횟수를 지정하는 animation-iteration-count 속성

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

기본형 : animation-iteration-count: <숫자> | infinite

 

※ animation-iteration-count의 속성값

 

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

 

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

animation-timing-function 속성을 사용해

애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있음.

기본형 : animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

 

※ 무한 반복하는 애니메이션 만들기

animation-iteration-count 속성을 추가하여 애니메이션을 무한 반복하게 만듦.

 

 

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

animation 관련 속성을 한꺼번에 표기할 때

주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다는 것임.

애니메이션 실행 시간을 지정하지 않으면 애니메이션이 작동하지 않기 때문.

기본형 : animation: <animation-name> | <animation-duration> | <animation-timing-function> |

             <animation-delay> | <animation-iteration-count> | <animation-direction>

 

※ 애니메이션 2개를 한꺼번에 지정하기

rotate와 background 애니메이션을 동시에 실행함.

animation 속성을 사용하면 쉼표(,)로 구분하여 둘 이상의 애니메이션을 간단하게 표현 가능함.

rotate와 background 애니메이션의 실행 시간은 모두 1.5초 동안이고 무한 반복함.

background 애니메이션에는 alternate 속성이 있어서 반대 방향으로도 실행됨.

rotate 애니메이션은 중간 지점(50%)에서 x축 기준으로 회전하고, 끝나는 지점(100%)에서 y축 기준으로 회전함.

background 애니메이션은 처음에는 빨간색 배경, 중간에는 초록색 배경, 마지막에는 파란색 배경으로 바뀜.

 

왼쪽에서 오른쪽으로 무한 반복함

 

---