왼쪽에서 CSS 슬라이드인 전환을 작성하는 방법은 무엇입니까?

왼쪽에서 CSS 슬라이드인 전환을 만드는 방법

CSS에서 왼쪽에서 슬라이드인 전환을 구현하려면 CSS3 전환이나 애니메이션을 활용해야 합니다. 구현 방법은 다음과 같습니다.

Hover와 함께 CSS3 전환 사용(Demo One)

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

이 스니펫은 요소의 위치를 ​​왼쪽에서 부드럽게 전환합니다. -100px; 호버링 시 1초 이상 0으로 변경됩니다. 요소의 위치를 ​​조정하기 위해 변환: 번역()을 활용할 수도 있습니다.

CSS3 애니메이션 사용(데모 2)

#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초 후에 자동으로 시작됩니다. animation-delay 속성을 사용합니다. 애니메이션 채우기 모드를 앞으로 설정하면 애니메이션이 끝난 후 요소의 가시성이 유지됩니다.

브라우저 지원

CSS 전환 및 애니메이션의 브라우저 호환성에 대한 자세한 내용은 caniuse.com을 참조하세요.

추가 자료

이러한 기술에 대한 더 자세한 지식을 보려면, 탐색:

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

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