[CSS] CSS 애니메이션 (Transform, Transition, Animation)

Transform, Transition, Animation은 전부 css3 의 언어에 등장하는 속성

1. Transform

transfrom은 특정 영역을 회전시키거나, 확대/축소 시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용

1.1 rotate, scale, skew, translate

.transition {
      transfrom: rotate(45deg); /* 회전 */
			transform: scale(2,3); /* 확대 축소 */
      transform: skew(10deg, 20deg); /* 각도 변경 */
			transform: translate(100px; 200px); /* 위치 변경 */
}

• .rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능
• .scale(x, y): 숫자는 비율의 의미하며 width를 x배, height를 y배 만큼 확대, 소수를 넣으면 축소
• .skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비틂, 음수 입력 가능
• .translate(x, y): 선택한 오브젝트의 좌표 변경, 음수 입력 가능

1.2 prefix 접두사

.transition {
      -webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
      -mox-transform: translate(100px, 200px); /* 파이어폭스 */
      -ms-transform: translate(100px, 200px ; /* 익스플로러 9.0 */
      -o-transform: translate(100px, 200px); /* 오페라 */
}

• Transform은 CSS의 최신 버전에서만 실행 가능한 키워드이지만, prefix를 추가하면 하위 버전의 브라우저에서도 실행 가능

---

2. Transition

transition은 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용

transition: [적용시키고 싶은 속성, 또는 all] [바뀌는 시간] [전환 효과의 시간동 속도] [지연 시간];

2.1 property, duration, timing-function, delay

.transition {
      transition-property: width;
      transition-duration: 2s;
}

• .property : 효과를 적용하고자 하는 css 속성
• .duration : 효과가 나타나는데 걸리는 시간
• .timing-function : 효과의 속도, linear은 ‘일정하게’라는 의미
• .delay : 특정 조건 하에서 효과 발동시키는 지연시간. 1s는 ‘1초 후’라는 의미

전환 효과의 시간당 속도 (Transition timing function)

1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
3. ease-in : 전환(transition) 효과가 천천히 시작됩니다.
4. ease-out : 전환(transition) 효과가 천천히 끝납니다.
5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다.
6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.

2.2 가상 선택자 :hover

:hover는 요소에 마우스를 올렸을 때 반응하게 하는 css 요소

 .transition: hover { width: 300px; }

• css에서 미리 만들어 놓은 클래스. ‘마우스를 올렸을 때’ 라는 조건
• .transition:hover를 띄어쓰기 없이 작성해야 함

2.3 Transition 종합

.transition{
		transition: width 2s linear 1s;
}

.transition: hover { width: 300px; }

• 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 일정한 속도로 변하는 애니메이션 효과 발동
• 숫자가 하나인 경우 ⇒ 무조건 .duration
• 숫자가 두개인 경우 ⇒ .duration → .delay 순서는 기억하자!
• ❗ transition을 .transition 이 아니라 .transition:hover에 넣게 되면?
  => 마우스를 치우는, 즉 없어질 때에 transition 효과가 적용되지 않는다.

---

3. Animation

animation 은 특정 지점별로 애니메이션 효과를 적용할 때 사용, transition과 달리 조건에 상관 없이 어떤 이벤트를 적용함

.animation {
    animation-name: changeWidth; /* 애니메이션 이름 */
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alternate;
}

/* 속성들을 한 줄로 작성 */
.animation{
    animation: changeWidth 3s linear 1s 6 alternate;
}

@keyframes changeWidth {  /* @keyframes 애니메이션 이름 */
    from { width: 300px; } /* 시작 */
    to {width: 600px; ] /* 끝 */
}

• .animation : 애니메이션 조건을 적어줌.
  • .name : 개발자가 임의로 작성하는 애니메이션 이름
  • -delay : 애니메이션이 시작하기 전 딜레이할 시간을 설정하는 속성
  • -timing-function : 애니메이션 속도 곡선을 제어하는 속성
  • -duration : 애니메이션이 실행되는 시간을 설정하는 속성
  • .iteraion-count : 애니메이션 반복 횟수
  • .direction : 애니메이션 진행 방향
    • alternation: from → to → from ( 시작에서 끝으로 갔다가 다시 끝에서 시작으로 오는 반복효과 적용)
    • normal : from → to, from → to (시작을 기준으로 끝으로 가는 것)
    • reverse : to → from, to → from (끝을 기준으로 시작으로 돌아가는 것)
• @keyframes : 애니메이션을 사용하려면 따라와야하는 일종의 명령어. 변화를 줄 실제 적용 값을 적어준다.
  • from, to : 시작과 끝 지점. 실제 애니메이션에 적용되는 결과값에 해당

---

4. 애니메이션 응용

4.1 Transform & Animation

.box1 {
    animation: rotation 1500ms linear infinite alternate;
}

@keyframes rotation {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}

• 애니메이션 코드를 한 줄로 작성시, 먼저 나오는 숫자가 .duration이고, 나중에 나오는 숫자가 .delay
• 1000ms = 1s , 1500ms는 ‘1.5초’ infinition는 ‘무한 반복 효과’

4.2 prefix 작성시 유의사항

.box1 {
    -webkit-animation: rotation 3s linear 1s 6 alternate;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(-10deg); }
    to {-webkit-transform: rotate(10deg); }
}

• prefix가 같은 애니메이션끼리 연동