CSS 3 slide-in from left transition

问题:

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> 

回答1:

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.

回答2:

2016

Use CSS3 2D transform to avoid performance issues (mobile)

A common pitfall is to animate left/top/right/bottom properties instead of using css-transform to achieve the same effect. For a variety of reasons, the semantics of transforms make them easier to offload, but left/top/right/bottom are much more difficult.

Source: Mozilla Developer Network (MDN)

---

Demo:

var $slider = document.getElementById('slider'); var $toggle = document.getElementById('toggle');  $toggle.addEventListener('click', function() {     var isOpen = $slider.classList.contains('slide-in');      $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in'); });

#slider {     position: absolute;     width: 100px;     height: 100px;     background: blue;     transform: translateX(-100%);     -webkit-transform: translateX(-100%); }  .slide-in {     animation: slide-in 0.5s forwards;     -webkit-animation: slide-in 0.5s forwards; }  .slide-out {     animation: slide-out 0.5s forwards;     -webkit-animation: slide-out 0.5s forwards; }      @keyframes slide-in {     100% { transform: translateX(0%); } }  @-webkit-keyframes slide-in {     100% { -webkit-transform: translateX(0%); } }      @keyframes slide-out {     0% { transform: translateX(0%); }     100% { transform: translateX(-100%); } }  @-webkit-keyframes slide-out {     0% { -webkit-transform: translateX(0%); }     100% { -webkit-transform: translateX(-100%); } }

<div id="slider" class="slide-in">     <ul>         <li>Lorem</li>         <li>Ipsum</li>         <li>Dolor</li>     </ul> </div>  <button id="toggle" style="position:absolute; top: 120px;">Toggle</button>

回答3:

Here is another solution using css transform (for performance purposes on mobiles, see answer of @mate64 ) without having to use animations and keyframes.

I created two versions to slide-in from either side.

$('#toggle').click(function() {   $('.slide-in').toggleClass('show'); });

.slide-in {   z-index: 10; /* to position it in front of the other content */   position: absolute;   overflow: hidden; /* to prevent scrollbar appearing */ }  .slide-in.from-left {   left: 0; }  .slide-in.from-right {   right: 0; }  .slide-in-content {   padding: 5px 20px;   background: #eee;   transition: all .5s ease; /* our nice transition */ }  .slide-in.from-left .slide-in-content {   transform: translateX(-100%);   -webkit-transform: translateX(-100%); }  .slide-in.from-right .slide-in-content {   transform: translateX(100%);   -webkit-transform: translateX(100%); }  .slide-in.show .slide-in-content {   transform: translateX(0);   -webkit-transform: translateX(0); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slide-in from-left">   <div class="slide-in-content">     <ul>       <li>Lorem</li>       <li>Ipsum</li>       <li>Dolor</li>     </ul>   </div> </div>  <div class="slide-in from-right">   <div class="slide-in-content">     <ul>       <li>One</li>       <li>Two</li>       <li>Three</li>     </ul>   </div> </div>  <button id="toggle" style="position:absolute; top: 120px;">Toggle</button>

回答4:

USE THIS FOR RIGHT TO LEFT SLIDING :

HTML:

   <div class="nav ">        <ul>         <li><a href="#">HOME</a></li>         <li><a href="#">ABOUT</a></li>         <li><a href="#">SERVICES</a></li>         <li><a href="#">CONTACT</a></li>        </ul>    </div> 

CSS:

/*nav*/ .nav{     position: fixed;     right:0;     top: 70px;     width: 250px;     height: calc(100vh - 70px);     background-color: #333;     transform: translateX(100%);     transition: transform 0.3s ease-in-out;  } .nav-view{     transform: translateX(0); } .nav ul{     margin: 0;     padding: 0; } .nav ul li{     margin: 0;     padding: 0;     list-style-type: none; } .nav ul li a{     color: #fff;     display: block;     padding: 10px;     border-bottom: solid 1px rgba(255,255,255,0.4);     text-decoration: none; } 

JS:

  $(document).ready(function(){   $('a#click-a').click(function(){     $('.nav').toggleClass('nav-view');   }); }); 

TUTORIAL AND SOURCE FILE: [WATCH THIS VIDEO][1]

DEMO: http://www.themeswild.com/read/slide-navigation-left-to-right

文章来源: CSS 3 slide-in from left transition