CSS의 animation에 대해서 알아보자

hover : 커서를 가져다 댈때 나타나는 효과를 정의.

.box1:hover {
background-color: blueviolet;
transition: background-color 300ms linear;
}

transition-property : 트랜지션의 속성.

ex) transition-property: background-color
!! transition은 적용하고자 하는 태그에 넣어줘야함 !!

transition-duration : 트랜지션의 지속시간.

ex) transition-duration: 300ms는 트랜지션의 지속시간을 3초로 하겠다는것.

transition-time-function : 트랜지션의 전환속도.

1. linear : 처음부터 끝까지 일정한 속도로,
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 함수에 따라 진행됩니다.

transition의 여러 속성을 한번에 쓰기

transition: background-color 300ms linear;
배경 색상 변경을 / 지속시간 3초로 / 전환속도 처음부터 끝까지 일정하게.
transition: all 200ms ease;
모두 / 지속시간 2초로 / 전환속도는 ease로.

.box1:hover {
    background-color: blueviolet;
    transition: background-color 300ms linear;
  }
  
box1에 커서를 가져다 댔을때{
	배경 색상을 blueviolet색으로 바꿉니다.
    배경 색상을 트랜지션할때 지속시간은 3초로, 전환속도는 처음부터 끝까지 일정하게 합니다.
 
  .box2:hover {
    border-radius: 50%;
    background-color: cornflowerblue;
    transition: all 2s ease;
  }
 box2에 커서를 가져다 댔을때{
 	모서리를 50% 둥글게 바꿉니다.
    배경 색상을 cornflowerblue색으로 바꿉니다.
    all(배경색과 모서리 모두) 지속시간은 2초로, 전환속도는 ease로.

  .box3:hover {
    border-radius: 50%;
    transform: translateX(400px);
    background-color: cornflowerblue;
    transition: all 3s ease;
  }
 box3에 커서를 가져다 댔을때{
 	모서리를 50% 둥글게 바꿉니다.
    X축으로 400px 이동시킵니다.
    배경 색상을 cornflowerblue색으로 바꿉니다.
    all(모서리, 이동, 배경 색 변경) 지속시간은 3초, 전환속도는 ease로.