CSS만 사용하여 크로스 브라우저 슬라이드인 효과를 만드는 방법은 무엇입니까?

CSS만으로 크로스 브라우저 슬라이드인 전환을 만드는 방법

CSS를 사용하면 슬라이드인 요소를 원활하게 만들 수 있습니다. JavaScript가 없는 왼쪽부터. 이러한 다양성은 CSS3 전환 또는 CSS3 애니메이션을 통해 가능합니다.

CSS 전환

예를 들어, 마우스 오버로 인한 전환을 구현할 수 있습니다.

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

이 경우 .wrapper 위로 마우스를 가져가면 왼쪽에서 #slide: -100px; 왼쪽으로: 0; 1초에 걸쳐 실행됩니다.

CSS 애니메이션

또는 애니메이션을 사용하여 슬라이드인 효과를 자동화할 수도 있습니다.

#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초 후에 자동으로 애니메이션을 시작합니다. 애니메이션 채우기 모드: 앞으로; 속성을 사용하면 애니메이션이 완료된 후에도 div가 계속 표시됩니다.

CSS 애니메이션 및 전환에 대한 추가 정보는 다음 리소스를 참조하세요.

• 애니메이션: https://developer. mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• 전환: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

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