in

CSS 3 deslizable desde la transición izquierda

apple touch icon@2

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

Para compatibilidad con el navegador: http://caniuse.com/

Hice dos ejemplos rápidos solo para mostrarles a qué me refiero.

Transición CSS (al pasar el mouse)

Demo uno

Código relevante

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

En este caso, solo estoy cambiando la posición de left: -100px; para 0; con un 1. duración. También es posible mover el elemento usando transform: translate();

Animación CSS

Demo 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 uno), pero la animación comienza automáticamente después de 2 segundos, y en este caso configuré animation-fill-mode para 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

Espero que esto haya ayudado.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Python – Deque

gfg 200x200 min

bucles en python – GeeksforGeeks