37. CSS - CSS와 애니메이션

1. CSS와 애니메이션

1. 트랜스폼(변형)

1. 특정 태그의 크기나 위치를 변경하는 것을 트랜스 폼이라고 한다.
2. CSS에서 변형을 적용하기 위해서는 tranform속성을 지정해 줘야한다.
3. transform: 함수(어떤 변형을 진행할 지)
4. 2차원 트랜스폼(변형)
   • 2차원 평면에서 웹 태그들을 변형한다. 2차원 좌표인 x축, y축을 사용하여 가로, 세로 이동을 시키거나 가로, 세로로 축소/확대 시키는 변형을 만들 수 있습니다.
5. 2차원 변형 함수(tranform의 속성값)
   • translate(x, y): 지정한 크기 만큼 x축, y축 이동
   • translateX(x), translateY(y): 각각 x축, y축 이동
   • scale(x, y): 지정한 크기만큼 x축, y축으로 축소/확대
   • scaleX(x), scaleY(y): 각각 x축, y축으로만 축소/확대
   • rotate(각도): 지정한 각도만큼 회전
   • skew(x, y): 지정한 각도만큼 x축, y축으로 왜곡.
   • skewX(x), skewY(y): 각각 지정한 각도만큼 x축, y축으로만 왜곡
6. 3차원 트랜스폼(변형)
   • 3차원 변형은 2차원 변형에 z축이 추가된 것이라고 생각하면 된다. z축은 앞뒤로 이동하거나 크기를 조절할 수 있다. 사람쪽으로 다가오면 값이 커지고 멀어지면 값이 작아진다.
7. 3차원 변형 함수
   • translate3d(x, y, z): 지정한 크기만큼 x축, y축, z축으로 이동.
   • translateZ(z): 지정한 크기만큼 z축으로 이동.
   • scale3d(x, y, z): 지정한 크기만큼 x축, y축, z축으로 축소/확대
   • scaleZ(z): 지정한 크기만큼 z축으로 확대
   • rotate(x, y, 각도): 지정한 각도만큼 회전
   • rotate(x, y, z, 각도): 지정한 각도만큼 회전
   • rotateZ(각도): 지정한 각도만큼 z축으로 기준으로 회전
   • perpetive(길이): 길이만큼 화면의 깊이값을 추가한다.

2. 트랜지션

1. 트랜지션은 태그의 스타일 바꾸는 속성을 지정한다. 스타일이 바뀌는 시간을 지정하여 애니메이션 효과처럼 나태낼 수도 있다.
2. 태그의 배경색을 바꾸거나 테두리를 사각형에서 원형으로 변경하는 것처럼 스타일 관련 속성들을 변경하는 것이다.
3. 트랜지션과 속성
   • transition-property: 트랜지션에 적용할 속성을 지정한다.
     • 지정가능한 속성 값
       • all: 모든 속성 변경
       • none: 아무 속성도 변경하지 않음
       • 속성 이름: color, background-color, width 등 트래지션을 적용할 속성의 이름 지정
   • transition-duration: 트랜지션이 지속될 시간 지정. 속성값으로 시간을 입력해주면되고 단위는 초단위로 s를 사용한다. ex) 1초 -> 1s
   • transition-timing-function: 트랜지션의 진행 속도를 지정한다.
     • 지정가능한 속성 값
       • linear: 시작부터 끝까지 일정한 속도로 진행
       • ease: 처음에는 천천히 점점 빨라지다가 마지막에는 다시 천천히. 기본값.
       • ease-in: 시작을 느리게
       • ease-out: 마직막을 느리게
       • ease-in-out: 시작과 마지막을 느리게
   • transition-delay: 지연시간을 지정하는 속성. 트래지션의 시작시간을 언제로 할 것인지 정하는 것. 초단위의 시간을 속성 값으로 입력
   • transition: 트랜지션 관련 속성 한 번에 지정하기. transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 지정. 네 개의 순서는 상관없지만 시간 단위 값이 두개이기 때문에 먼저 나오는 시간을 transition-duration 값으로 인식함.

3. 애니메이션

1. 트랜지션만 이용해도 충분히 부드러운 애니메이션 효과를 만들순 있지만 CSS의 animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있다.
2. animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션 효과를 만들게 되는 데 그때 그 특정 지점을 키프레임(keyframe)이라고 부른다.
3. keyframe은 @keyframes 속성으로 지정. 나머지 속성들은 animation 속성으로 지정.
4. 애니메이션 관련 속성들
   • @keyframes: 애니메이션이 바뀌는 지점을 지정
   • animation-delay: 애니메이션의 시작 시간 지정
   • animation-direction: 애니메이션 종료 후 처음부터 시작할지 역방향으로 진행될지 지정
   • animation-fill-mode: 애니메이션이 진행되지 않을 때의 상태 지정
   • animation-iteration-count: 애니메이션 반복 횟수 지정
   • animation-name: @keyframe에 설정해놓은 중간상태의 이름을 지정
   • animation-timing-function: 키프레임 전환 형태를 지정
   • animation: 애니메이션 관련 속성들을 한 번에 지정
5. @keyframes
   • 애니메이션 시작과 끝을 비롯하여 바뀌는 부분이 있으면 @keyframes 속성으로 바뀌는 지점을 지정
   • @keyframes 이름 {

     선택자 {
         스타일;
     }

     }
   • @keyframes에서의 선택자는 일반적 css의 선택자와는 다르다. 지점을 선택하는 지점선택자라고 생각하면된다. 0%(시작지점)~100%(끝지점)으로 지정가능.(0% {스타일} 10% {스타일} .... 100% {스타일}). 0%와 100%인 시작과 끝만 사용할 때는 from {스타일} to {스타일}로 사용해도 된다.
6. animation-name: @keyframes로 지정한 애니메이션 이름을 지정하여 어떠한 애니메이션을 사용할 것인지 지정한다.
   • animation-name: 키프레임 이름 | none;
7. animation-duration: 애니메이션이 끝나는 시간을 지정한다. 기본 값은 0으로 되어있어서 별도로 지정하지 않으면 애니메이션이 진행되지 않는다.
8. animation-direction: 애니메이션의 진행방향 지정
   • normal: from에서 to로 진행
   • reverse: to에서 from으로 진행
   • alternate: 홀수 번째 횟수에서는 normal로 짝수 번째 횟수에서는 reverse 진행
   • alternate-reverse: alternate의 반대로 진행
9. animation-iteration-count: 애니메이션 반복횟수 지정. 기본 값은 1
   • 숫자: 반복할 숫자 입력
   • infinite: 무한 반복
10. animation: 애니메이션 관련 속성 한 번에 지정. animation-name, animation-duration, animation-timingfunction, animation-direction, ... 한 번에 지정