[CSS3]Transition & Animation

Animation vs Transition

이 둘의 차이점으로

transition은 전환 즉, 어떤 요소에 property를 줬을 때 부드러운 전환이 특징인 반면

animation은 주고 싶을 때 언제든 요소에 움직임을 줄 수 있어 자유도가 높다.

---

👀CSS transition

우리는 Styling을 시도하다 보면 요소의 속성 값을 변경하는 경우가 발생한다.

이럴 때 속성 값을 바로 변경하는 것이 아닌 애니메이션을 통해 속성 값을 변경한다.

 

Transition을 사용하기 위해서는 4가지 선언을 알고 있어야 한다.

(HTML class에 active 추가되었을 때 동작하는 모습을 볼 수 있다.)

.box.active{
	font-size:30px;
    	background-color: #ff4949;
}
/*해당 코드는 하단에서 설명하는 코드에 있어서 모두 필요하기 때문에 따로 두었다.*/

1. property

✅ property는 (CSS) 속성이란 뜻이다.

✅ transition이 사용될 때 가장 먼저 선언

✅ 변화가 일어날 속성이 어떤 것인지 명시해줘야 한다.

.box{
	font-size:20px;
	background-color: #0066ff;
    	transition: font-size;
}

2. duration

✅ duration은 지속 시간이란 뜻이다.

✅ property 다음으로 선언해줘야 한다.

✅ 변화가 일어날 때 얼마 동안 일어나는지 명시해줘 여한다.

[ ms(miele seconds) | s(seconds) ]

.box{
	font-size:20px;
	background-color: #0066ff;
   	transition: font-size 2500ms;
}

3. [timing-function]

✅ 생략 가능하다. (디테일한 부분 설정 필요시 사용)

✅ 변화가 일어날 때 변화가 일어나는 속도를 지정해준다.

[ ease-in | ease-out | ease-in-out | cubic-bezier( ) ]

.box{
	font-size:20px;
	background-color: #0066ff;
    	transition: font-size 2500ms ease in;
}

4. [delay]

✅ 생략 가능하다. (디테일한 부분 설정 필요시 사용)

✅ delay는 지연이란 뜻이다.

✅ transition이 몇 초 후에 움직이길 원할때 사용한다.

.box{
	font-size:20px;
	background-color: #0066ff;
    	transition: font-size 2500ms ease-out, background-color 2000ms cubic-bezier(.08, .57, .97, -0.78);
        /*각각의 property마다 개별 선언이 가능하다( , )*/
}

---

👀Animation

Animation은 많은 선언을 보유하고 있다.

때문에 가장 많이 사용되는 6가지 property를 설명해보겠다.

 

1. name

animation을 줄 때 가장 중요한 것은  @keyframes을 이용해 어떤 애니메이션을 줄지 정의해야 한다.

@keyframes name{
  from{
    /* Rules */
  }

  to{
    /* Rules */
  }
}

✨keyframes 사용법

@keyframes 작성 후 사용할 anmaton logic( name)을 적는다.

이때 바뀌고 싶은 animation을 ruels(시작: from / 종료: to)을 통해 설정한다.

 

2. duration

✅ Transition과 동일하게 지속시간을 의미한다. 

[ ms(milie seconds) | s(seconds) ]

.box{
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #0066ff;
  animation-name: move-box;
  animation-duration: 2000ms;
}
@keyframes move-box{
  from{
    top: 0;
    background-color: #0066ff;
  }
  to{
    top: 200px;
    background-color: #ff4949;
  }
}

3. [timing-function]

✅ Transition과 동일하다.

[ ease-in | ease-out | ease-in-out | cubic-bezier( ) ]

.box {
  animation-name: move-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
}

 

4. [delay]

.box {
  animation-name: move-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
  animation-delay: 1000ms;
}

5. iteration -count

✅ iteration은 되풀이라는 뜻이다. 

✅ 되풀이를 몇 번 할 것인지 물어보는 속성이다.

.box {
  animation-name: move-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
}

6. direction

✅ direction은 방향이란 뜻이다.

✅ animation이 진행될 때 어느 방향으로 진행되는지 물어보는 속성이다.

.box {
  animation-name: move-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
  animation-direction: alternate;
}