css - CSS 3从左转换滑入(CSS 3 slide-in from left transition)

Question

Is there a cross browser solution to produce a slide-in transition with CSS only, no javascript?

(有没有一个跨浏览器解决方案来生成只有CSS的滑入式转换，没有javascript？)

Below is an example of the html content:

(以下是html内容的示例：)

<div>
    <img id="slide" src="http://.../img.jpg />
</div>

  ask by Gimmy translate from so

Answer 1

You can use CSS3 transitions or maybe CSS3 animations to slide in an element.

(您可以使用CSS3过渡或CSS3动画在元素中滑动。)

For browser support: http://caniuse.com/

(对于浏览器支持： http ： //caniuse.com/)

I made two quick examples just to show you how I mean.

(我做了两个简单的例子，只是为了告诉你我的意思。)

CSS transition (on hover)

(CSS转换（悬停时）)

Demo One

(演示一)

Relevant Code

(相关守则)

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

In this case, Im just transitioning the position from left: -100px;

(在这种情况下，我只是从left: -100px;转换位置left: -100px;)

to 0;

(到0;)

with a 1s.

(一个1s。)

duration.

(持续时间。)

It's also possible to move the element using transform: translate();

(也可以使用transform: translate();移动元素transform: translate();)

CSS animation

(CSS动画)

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

Same principle as above (Demo One), but the animation starts automatically after 2s, and in this case I've set animation-fill-mode to forwards , which will persist the end state, keeping the div visible when the animation ends.

(与上面相同的原理（Demo One），但动画在2s后自动开始，在这种情况下，我将animation-fill-mode为forwards ，这将持续结束状态，在动画结束时保持div可见。)

Like I said, two quick example to show you how it could be done.

(就像我说的那样，两个简单的例子向您展示如何做到这一点。)

EDIT: For details regarding CSS Animations and Transitions see:

(编辑： 有关CSS动画和过渡的详细信息，请参阅：)

Animations

(动画)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_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

(https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions)

Hope this helped.

(希望这有帮助。)