transition 속성을 이해하기 위해 기본 button을 만들어 보았습니다.

자세히 코드를 작성해 보세요

.button {
  cursor: pointer;
  outline: none;
  font-size: 30px;
  width: 200px;
  height: 100px;
  background: pink;
  color: white;
  border-radius: 10px/10px;
  box-shadow: 10px 10px 10px #706b6b;

  transition-property: transform, background, box-shadow, color; ※
  transition-duration: 2s;　※
}

.button:hover {　※
  box-shadow: 3px 3px 3px #8a7070;
  transform: scale(.5);
  background: red;
  color: #8a7070;
}

transition 는 「변화 전」과 「변화 후」의 code 양쪽을 써 줍니다

'변화 전'과 '변화 후'의 中間를 보완하는 역할을 하고 있습니다
transition-property 　는 변경이 필요할 CSS의 속성을 지정합니다.

이번이라면, transform , background , box-shadow , color 입니다.
transition-duration: 2s; 에서 변경이 시작되고 끝날 때까지의 시간을 지정합니다.

『변화 후』에 어떻게 할 것인가는 .button:hover 로 지시하고 있습니다.

덧붙여서, transform: scale(.5); 　는, 크기를 변형시키는 프로퍼티로, 크기 0.5배로 하고 있습니다. 크게 하고 싶은 경우는 scale(2) 어쨌든 변경하면 좋다고 생각합니다!

요약

이번에는 transition 의 기본에 대해 써 보았습니다.

계속 응용 프로그램에 도전하고 싶습니다

이번은 이상입니다!

감사합니다