[CSS] 트랜지션(transition)

트랜지션(transition)을 통해 간단히 애니메이션(animation) 효과를 줄 수 있다. CSS에는 애니메이션 이름의 함수가 따로 있긴 하지만 보다 더 간단한 트랜지션을 먼저 알아보자.먼저 어떤식으로 사용되는지 보자.메뉴바마우스를 올리면 서브메뉴가 애니메이션 효과처럼 스르륵 펼쳐진다.메뉴바 코드※ 키포인트.item > ul{ border: 1px solid black; height: 0; opacity: 0; transition: all 1s; overflow: hidden; }.item:hover > ul{ height: 70px; opacity: 1;}서브 메뉴의 기본값으로 opacity(투명도) 를 0으로 하여 안보이게 하였고overflow: hidden 으로 height 보다 큰 태그들은 보이지 않게 하였다.만약 opactity 만으로..........