How to Build a CSS Slide-In Transition from the Left?

How to Create a CSS Slide-in Transition from the Left

In CSS, achieving a slide-in transition from the left involves leveraging either CSS3 transitions or animations. Here's how you can implement it:

Using CSS3 Transitions with Hover (Demo One)

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

This snippet smoothly transitions the element's position from left: -100px; to 0 over 1 second on hover. You can also utilize transform: translate() to adjust the element's position.

Using CSS3 Animations (Demo Two)

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

Similar to the previous example, this animation automatically initiates after 2 seconds with the animation-delay property. Setting animation-fill-mode to forwards preserves the element's visibility after the animation concludes.

Browser Support

Refer to caniuse.com for detailed information on browser compatibility for CSS transitions and animations.

Further Reading

For more in-depth knowledge on these techniques, explore:

• CSS Animations: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• CSS 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 CSS Slide-In Transition from the Left?. For more information, please follow other related articles on the PHP Chinese website!