CSS : Transition & Animation

⭕️ transition (부드럽게 보이기 위해) - 전환
: property duration [timing-function][delay]
[] <= 생략 가능

• [timing-function]
  : ease-in, ease-out, ease-in-out, cubic-bezier()
• [delay]
  : ms,

.box {
	font-size: 13px;
    background-color: red;
    transition: font-size 0.3s ease-in-out
    모든 property를 똑같은 속성으로 지정하고 싶다면 all 을 사용
    각각 다른 속성으로 지정하고 싶다면(콤마) font-size 0.3s ease-in-out, background-color 0.5s
}

⭕️ animation + @keyframes

.box {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #006fff;
  animation: moveBox 4000ms ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;  // 끊김없이 0% ~ 100% 갔다가 100% ~ 0% 으로
}
@keyframes moveBox {
  0% {
    top: 0;
    background-color: red;
    border-radius: 0;
  }
  50% {
    background-color: #006fff;
    border-radius: 25%;
  }
  100% {
    top: 300px;
    background-color: black;
    border-radius: 50%;
  }
}