How to Create a Slide-In Transition Using Only CSS?

How to Add a Slide-In Transition with Pure CSS

In web design, creating visually appealing transitions can enhance user experience. One popular effect is a slide-in transition, where an element moves from off-screen to its desired position when triggered. This tutorial explores how to achieve this effect with CSS, without the need for JavaScript.

Option 1: CSS Transitions (On Hover)

CSS transitions allow you to smoothly transform an element's properties over a specified duration. Here's an example to create a slide-in transition on hover:

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

Option 2: CSS Animation

CSS animations offer more control over the transition, allowing you to specify a start and end time. Here's an example using animation:

#slide {
    left: -100px;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

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

Browser Support and Resources

For browser compatibility, refer to the following links:

• CSS Transitions: https://caniuse.com/transitions
• CSS Animations: https://caniuse.com/animations

Additional Resources

To learn more about CSS animations and transitions, check out the following Mozilla Developer Network (MDN) articles:

• 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 Create a Slide-In Transition Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!