How to Build a Cross-Browser Slide-In Effect Using Only CSS?

How to Create a Cross-Browser Slide-In Transition with CSS Only

Using CSS, you can seamlessly create an element that slides in from the left without JavaScript. This versatility is possible through either CSS3 transitions or CSS3 animations.

CSS Transition

As an example, you could implement a hover-triggered transition:

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

In this case, hovering over .wrapper will slide #slide from left: -100px; to left: 0; over the course of 1 second.

CSS Animation

Alternatively, you could use animation to automate the slide-in effect:

#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; }
}

This approach follows the same sliding mechanism, but it starts the animation automatically after 2 seconds. The animation-fill-mode: forwards; property ensures that the div remains visible after the animation completes.

For additional information on CSS Animations and Transitions, refer to the following resources:

• Animations: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• Transitions: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

The above is the detailed content of How to Build a Cross-Browser Slide-In Effect Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!