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

How to Create a Slide-In Transition with CSS

CSS offers several options for creating a slide-in transition, including CSS3 transitions and animations.

CSS3 Transitions

For transitions, the relevant code would look something like this:

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

In this example, the position of the element (#slide) is transitioned from left: -100px to 0 over the course of 1 second upon hover over the parent element (.wrapper).

CSS3 Animations

Alternatively, animations can be used to achieve a slide-in effect. Here's an example:

#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 animation starts after a 2-second delay and persists the end state when it completes.

Note: Browser support for these features can be checked [here](http://caniuse.com/).

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