Transition / Transform / Animation

1. transition

어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법

h1 {
  background-color: black;
  color: white;
  transition: background-color 2s ease-in-out, color 1s ease-in;
    /*h1의 background-color는 2초동안 ease-in-out으로 변하고, 
  color는 1초동안 ease-in으로 변함*/
}

h1:hover {
  background-color: white;
  color: black;
}

h1의 background-color는 2초동안 ease-in-out으로, color는 1초동안 ease-in으로 변하도록 지정
transition이 없다면 상태가 바로 휙휙 바뀌지만, transition을 통해 애니메이션 효과를 넣어줄 수 있다.

주의사항

transition은 변화가 일어날 element에 지정해야 한다. 위의 코드에서 hover에 transition을 지정하면, hover 상태에서만 transition이 일어나고 마우스가 떼지면 원상태로 복귀된다.

transition 변화하는 방법 (default)

linear : 일정한 속도
ease-in : 시작점보다 후반에 빨라짐
ease-out : 시작점이 빠르고 후반에 느려짐
ease-in-out : 느리게 시작하다가 가속 후 느려지면서 끝남

• cubic-bezier(0.420, 0.000, 1.000, 1.000) : cubic-bezier로는 자신만의 커브, 속도를 지정해서 효과를 줄 수도 있다.

아래의 링크에서 위 변화들이 어떻게 다른지 확인할 수 있어요
https://matthewlein.com/tools/ceaser

2. Transformation

한 element를 변형시키는 방법

기본적으로 많이 사용하는 것들만 정리

rotateX(deg) : X축 기준으로 지정한 deg만큼 회전
rotateY(deg) : Y축 기준으로
rotateZ(deg) : Z축 기준으로
scale(x) : x배 확대
skew(deg) : 지정 deg만큼 비스듬히 기울이기
translateX(10px) : 오른쪽으로 10px 이동
translateY(10px) : 아래쪽으로 10px이동

.box{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: pink;
  transition: transform 0.2s linear;
}

.box:hover{
  transform: scale(1.5);
}

위에서 정리한 transition을 transform에 적용하면 transform 변형에 애니메이션을 줄 수 있다!!

주의사항

transform은 옆의 element에 영향을 끼치거나 받지 않는다. 즉, 옆 element의 margin이나 padding에 상관없이 지정된 변형을 수행한다.

3. Animation

transition을 통해 특정 요소가 hover 되거나 클릭이 되었을때만 애니메이션이 작동되었다면, animation을 통해 마우스를 움직이지 않고도 우리가 원하는 만큼 애니메이션을 만들고 재생시킬 수 있다.

@keyframe 애니메이션_이름 {...}

1. from에서 시작해 to까지 변형

@keyframes circle_scale{
  from{
    transform : scale(1);
  }
  to{
    transform: scale(2);
  }
}

2. 0% => 50% => 100%까지 변형

@keyframes circle_scale2{
  0%{
   transform: scale(1);
  }
  50%{
    transform: scale(2);
  }
  100%{
    transform: scale(1);
  }
}

퍼센트는 0% => 100%, 0% => 50% => 80% => 100%등 원하는대로 지정해줄 수 있다.
퍼센트 지정방법이 더 부드럽고 자연스러움

.box{
  width: 50px;
  height: 50px;
  animation: circle_scale 0.5s ease-in-out infinite;
}

만들어진 애니메이션을 element에 지정해주기만 하면 된다.
animation: 애니메이션_이름 변형시간 변형방법;

	animation: circle_scale 0.5s ease-in-out infinite;
 	/*circlr_scale 애니메이션을 0.5초 동안 ease-in-out으로 재생할 것이고, infinite 무한 반복할 것이다.*/

infinite가 없다면 애니메이션이 한 번 재생되고 멈추겠죠?

/*element가 단순히 50px Y축으로 올라갔다가 내려오는 애니메이션*/
@keyframes upDown{
 0%{
  transform: none;
 }
 50%{
   transform: translateY(-50px);
 }
 90%{
   transform: none;
 }
}

주의사항

위에 예시에서는 animation에 tranform만 지정했지만, transform이 아닌 다른 것도 애니메이션에 넣을 수 있다. border-radius나 background-color, opacity 등등..

마무리

아래의 링크에서 여러 애니메이션 효과를 찾아보고 적용해보자
https://animista.net/
완전 유용한 사이트!!!❗

오늘 정리한 transiton, transform, animation이 css가 간지나 보이는데 한 목 한다.
잘 정리해서 여기저기 사용해보장