CSS 3 deslizable desde la transición izquierda

¿Existe una solución entre navegadores para producir una transición deslizable solo con CSS, sin JavaScript? A continuación se muestra un ejemplo del contenido html:

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

Jun 08 '13 00:06 Gimmy

Puede usar transiciones CSS3 o tal vez animaciones CSS3 para deslizarse en un elemento.

Para soporte del navegador: http://caniuse.com/

Hice dos ejemplos rápidos sólo para mostrarte lo que quiero decir.

Transición CSS (al pasar el mouse)

Demostración uno

Código relevante

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

En este caso, simplemente estoy haciendo la transición de la posición de left: -100px;a 0;con 1s. duración. También es posible mover el elemento usandotransform: translate();

animación css

Demostración dos

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

El mismo principio que el anterior (Demo One), pero la animación comienza automáticamente después de 2 segundos y, en este caso, lo configuré animation-fill-modeen forwards, que persistirá en el estado final, manteniendo el div visible cuando finalice la animación.

Como dije, dos ejemplos rápidos para mostrarle cómo se puede hacer.

EDITAR: Para obtener detalles sobre las animaciones y transiciones CSS, consulte:

animaciones

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Transiciones

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

Jun 08 '2013 08:06 Christofer Vilander

Utilice CSS3 2D `transform`para evitar problemas de rendimiento (móvil)

Un error común es animar left/// propiedades en lugar de topusarrightbottomtransformación csspara lograr el mismo efecto. Por diversas razones, la semántica de las transformaciones las hace más fáciles de descargar, pero left/ top/ right/ bottomson mucho más difíciles.

Fuente: Red de desarrolladores de Mozilla (MDN)

Manifestación:

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>

Expandir fragmento

Aug 04 '2015 21:08 mate64

Aquí hay otra solución que utiliza la transformación CSS (para fines de rendimiento en móviles, consulte la respuesta de @mate64) sin tener que usar animaciones ni fotogramas clave.

Creé dos versiones para deslizarlas desde cada lado.

$('#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: transform .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>

Expandir fragmento

Mar 18 '2017 16:03 w.stoettinger

CSS 3 deslizable desde la transición izquierda

Utilice CSS3 2D transformpara evitar problemas de rendimiento (móvil)

Utilice CSS3 2D `transform`para evitar problemas de rendimiento (móvil)