우리는 transition을 이용해서 동적인 화면을 만들 수 있다.
그렇다면 CSS의 모든 속성에 적용이 가능할까?
답을 말하자면 생각보다 간단하다.
CSS속성 중 숫자로 정도를 나타낼 수 있는 것은 적용이 가능하고
그렇지 못한 것은 적용이 불가능하다.
에를 들어보면
노란색 박스에 마우스를 올렸을 때
위치, 크기, 색, 테두리, 투명도 등등은 모두 duration이 적용이 가능하지만
display속성은 아예 적용이 불가능하다. 이는 display:none 상태가 되면 아예 사라져버리는 것이 되므로 그런 것 같다.
그렇다면 visibility는 적용이 가능할까?
transition이 적용은 가능하지만 duration값을 주어도 서서히 바뀌지 않으며
delay 효과만 적용이 된다.
그러므로 display와 visibility 대신에 opacity를 사용하자
Front-End