CSS에서 전환 설정
-
transition속성과 함께opacity및visibility속성을 사용하여 CSS에서 전환 설정 -
transition속성과 함께height,opacity및overflow속성을 사용하여 CSS에서 전환 설정
이 기사에서는 CSS에서 전환을 설정하는 방법을 소개합니다. 우리는 “불투명도”, “높이”, “가시성"에 대한 전환을 사용하여 마우스 오버 및 마우스 오버 시 페이드 인 및 페이드 아웃 효과를 주는 방법을 배웁니다.
transition 속성과 함께 opacity 및 visibility 속성을 사용하여 CSS에서 전환 설정
CSS의 display 속성에 transition 속성을 사용할 수 없습니다. 예를 들어, CSS transition 속성을 사용하여 호버링(마우스 인) 후 display : none을 display : block으로 변경할 수 없으며 그 반대의 경우도 마찬가지입니다. 따라서 opacity 및 visibility 속성을 전환과 함께 사용하여 항목에 페이드 인 및 페이드 아웃 효과를 줄 수 있습니다. 전환에는 transition-property, transition-duration, transition-timing-function 및 transition-delay와 같은 특정 속성이 있습니다. 우리는 또한 transition : opacity 2s linear 1s로 transition 속기 속성을 사용할 수 있습니다. 여기서 opacity는 transition-property, 2s는 transition-duration, linear는 transition-timing-function, 1s는 transition-delay를 나타냅니다. 호버를 사용하여 transition을 실험할 수 있습니다.
예를 들어 div를 만들고 ul 및 li 태그를 사용하여 3개의 정렬되지 않은 목록 항목 목록을 만듭니다. 그것을 보려면 div에 1px solid black의 테두리를 지정하십시오. ul의 속성을 opacity: 0 및 visibility: hidden 및 transition: visibility 0s, opacity 0.6s linear으로 설정합니다. opacity: 0만 사용하는 경우에도 항목을 클릭하고 호버링할 수 있기 때문에 opacity와 visibility를 모두 사용하고 있습니다. ul hover 속성을 visibility: visible 및 opacity: 1로 설정하여 ul의 목록 항목이 일부 transition 효과와 함께 호버링하는 동안에만 표시되도록 합니다.
아래의 예는 ul의 항목이 호버링하는 동안에만 표시됨을 보여줍니다. 항목은 0.6초 이내에 선형 효과로 나타나고 마우스를 멀리 이동하는 동안 다시 숨겨집니다.
예제 코드:
<div>
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Mango </li>
</ul>
</div>
div {
border : 1px solid black;
}
div > ul {
visibility: hidden;
opacity: 0;
transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
visibility : visible;
opacity : 1;
}
transition 속성과 함께 height, opacity 및 overflow 속성을 사용하여 CSS에서 전환 설정
display: none 및 display: block에 대한 전환을 사용하는 또 다른 대안은 전환과 함께 사용되는 height, overflow 및 opacity 속성일 수 있습니다. 항목이 보이지 않도록 목록에 대해 opacity : 0 및 height : 0을 설정할 수 있습니다. 또한 overflow: hidden을 설정하여 transition-duration에 시간이 걸리는 동안 항목이 div 밖으로 나가지 않도록 해야 합니다. 첫 번째 방법에서와 같이 transition 속기 속성을 사용할 수 있습니다.
예를 들어 div를 만들고 ul 및 li 태그를 사용하여 세 개의 정렬되지 않은 항목 목록을 만듭니다. 첫 번째 방법과 동일하게 div에 1px solid black 테두리를 지정합니다. ul의 속성을 opacity: 0 , overflow: hidden 및 height: 0으로 설정합니다. transition 속성의 값을 opacity 0.6s easy-in으로 설정합니다. ul hover 속성을 height: auto 및 opacity: 1로 설정하여 ul의 목록 항목이 일부 transition 효과가 있는 동안에만 표시되도록 설정합니다.
아래 예는 div가 비어 있고 div의 height가 0px임을 보여줍니다. 그러나 div에 마우스를 가져가면 항목 목록이 ease-in 효과와 함께 표시됩니다. ease-in 옵션은 전환의 느린 시작을 설정합니다. div의 height 속성은 auto가 됩니다. div에서 마우스를 가져가면 다시 비어 있습니다.
예제 코드:
<div>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</div>
div {
border: 1px solid black;
}
div > ul {
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.6s ease-in;
}
div:hover > ul {
opacity: 1;
height: auto;
}