CSS 3从左过渡处滑入 [英] CSS 3 slide-in from left transition

问题描述

有没有一个跨浏览器解决方案来产生一个幻灯片转换与CSS只，没有javascript？下面是html内容的示例：

 < div> 
< img id =slidesrc =http：//.../img.jpg /> 
< / div> 
  / pre> 
 
解决方案
您可以使用CSS3过渡或CSS3动画在元素中滑动。
 
 
 
如需浏览器支持： http://caniuse.com/  
 
 $ b       
 $ b 
 演示一 
 
 
 
相关代码
  .wrapper：hover #slide {
 transition：1s; 
 left：0; 
} 
  
在这种情况下，Im只是从 -100px; 到 0; ，持续时间为1s。也可以使用 transform：translate ）;  
 
 
 
  CSS动画 
 
 
 
 演示二 
  #slide { 
 position：absolute; 
 left：-100px; 
 width：100px; 
 height：100px; 
 background：blue; 
 -webkit-animation：slide 0.5s向前; 
 -webkit-animation-delay：2s; 
 animation：slide 0.5s向前; 
 animation-delay：2s; 
} 
 
 @ -webkit-keyframes slide {
 100％{left：0; } 
} 
 
 @keyframes slide {
 100％{left：0; } 
} 
  
与上述原理相同2s，在这种情况下，我已将 animation-fill-mode 设置为转发，这将持续结束状态，当动画结束时保持div可见。 
 
 
 
就像我说的，两个简单的例子，告诉你如何做。 
             
 
 
 $ b  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  
 
 
 
 转换 
 
 
 
 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions   p> 
 
 
希望这有帮助。 
 
Is there a cross browser solution to produce a slide-in transition with CSS only, no javascript? Below is an example of the html content:
<div>
    <img id="slide" src="http://.../img.jpg />
</div>

解决方案
You can use CSS3 transitions or maybe CSS3 animations to slide in an element.

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

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

CSS transition (on hover)

Demo One

Relevant Code
.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}
In this case, Im just transitioning the position from left: -100px; to 0; with a 1s.  duration. It's also possible to move the element using transform: translate();

CSS animation

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. 

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

EDIT:
For details regarding CSS Animations and Transitions see:

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

Hope this helped.  

                        
这篇关于CSS 3从左过渡处滑入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！