css-13: transition

transition

1. 어떤 상태에서 다른 상태로의 변화! 를 보내주는 애니매이션이다
2. transtion은 state가 없는 요소에 붙어야한다(뿌리/처음만든곳)
3. transtion 에 변화를 준것들은 state에 들어있는것들이 기준이 되어 바뀌는것이다 바뀌는 것들에 한정하여 transition 이 일어날 수 있다
4. transition 은 상태에 따라 바귀는 요소가 있을때 사용함
5. state: ex) hover, active, focus …
6. ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할
   • linear - 변화 그래프가 직선
   • ease-in - 시작과 끝이 빠름
   • ease-out - 시작과 끝이 느림
   • ease-in-out - 시작이 빠르고 끝이 느림
   • all : 변화 요소를 한번에 다룬다.
   • 따로 다루고 싶으면 각각 써주면 됨

<a href="#">Go home</a>

a {
  color: wheat;
  background-color: tomato;
  text-decoration: none;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 55px;
  transition: background-color 1s ease-in-out, color 1s ease-in-out;
}

a:hover {
  color: tomato;
  background-color: wheat;
}

기본값(root)에선 링크의 폰트컬러가 화이트 마우스를 갖다대면 폰트컬러가 1초에 걸쳐 토마토색으로 변한다 (배경색이 1초에 걸쳐 wheat로 변한다)

https://matthewlein.com/tools/ceaser