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? Below is an example of the html content:

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

This question is related to css css-transitions

User · Answer

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   x000D   x000D  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        x000D   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        x000D   lt div id  slider  class  slide-in  gt       lt ul gt           lt li gt Lorem lt  li gt           lt li gt Ipsum lt  li gt           lt li gt Dolor lt  li gt       lt  ul gt   lt  div gt    lt button id  toggle  style  position absolute  top  120px   gt Toggle lt  button gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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.

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

User · Answer

I liked  mate64 s answer so I am going to reuse that with slight modifications to create a slide down and up animations below    x000D   x000D  var  slider   document getElementById  slider    x000D  var  toggle   document getElementById  toggle    x000D   x000D   toggle addEventListener  click   function     x000D      var isOpen    slider classList contains  slide-in    x000D   x000D       slider setAttribute  class   isOpen    slide-out     slide-in    x000D      x000D   slider   x000D      position  absolute  x000D      width  100px  x000D      height  100px  x000D      background  blue  x000D      transform  translateY -100    x000D      -webkit-transform  translateY -100    x000D    x000D   x000D   slide-in   x000D      animation  slide-in 0 5s forwards  x000D      -webkit-animation  slide-in 0 5s forwards  x000D    x000D   x000D   slide-out   x000D      animation  slide-out 0 5s forwards  x000D      -webkit-animation  slide-out 0 5s forwards  x000D    x000D       x000D   keyframes slide-in   x000D      100    transform  translateY 0      x000D    x000D   x000D   -webkit-keyframes slide-in   x000D      100    -webkit-transform  translateY 0      x000D    x000D       x000D   keyframes slide-out   x000D      0    transform  translateY 0      x000D      100    transform  translateY -100      x000D    x000D   x000D   -webkit-keyframes slide-out   x000D      0    -webkit-transform  translateY 0      x000D      100    -webkit-transform  translateY -100      x000D    x000D   lt div id  slider  class  slide-in  gt  x000D       lt ul gt  x000D           lt li gt Lorem lt  li gt  x000D           lt li gt Ipsum lt  li gt  x000D           lt li gt Dolor lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   lt button id  toggle  style  position absolute  top  120px   gt Toggle lt  button gt  x000D   x000D   x000D

User · Answer

USE THIS FOR RIGHT TO LEFT SLIDING    HTML                                lt div class  nav   gt          lt ul gt           lt li gt  lt a href     gt HOME lt  a gt  lt  li gt           lt li gt  lt a href     gt ABOUT lt  a gt  lt  li gt           lt li gt  lt a href     gt SERVICES lt  a gt  lt  li gt           lt li gt  lt a href     gt CONTACT lt  a gt  lt  li gt          lt  ul gt      lt  div gt    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

[css] CSS 3 slide-in from left transition

The answer is

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

Examples related to css

Examples related to css-transitions

Tags

[css] CSS 3 slide-in from left transition

The answer is

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

Examples related to css

Examples related to css-transitions

Tags

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