CSS를 사용하여 슬라이드인 전환 효과를 만드는 방법은 무엇입니까?

CSS를 사용하여 슬라이드인 전환을 만드는 방법

CSS는 CSS3 전환 및 애니메이션을 포함하여 슬라이드인 전환을 만들기 위한 여러 옵션을 제공합니다.

CSS3 전환

전환의 경우 관련 코드는 다음과 같습니다. this:

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

이 예에서 요소(#slide)의 위치는 상위 요소(.wrapper) 위로 마우스를 가져가면 1초 동안 왼쪽에서 -100px에서 0으로 전환됩니다.

CSS3 애니메이션

또는 애니메이션을 사용하여 슬라이드인 효과를 얻을 수도 있습니다. 예는 다음과 같습니다.

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

이 애니메이션은 2초 지연 후 시작되고 완료되면 종료 상태를 유지합니다.

참고: 이러한 기능에 대한 브라우저 지원 [여기](http://caniuse.com/)에서 확인하실 수 있습니다.

위 내용은 CSS를 사용하여 슬라이드인 전환 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!