Deslizar desde la transición izquierda en CSS
La creación de comportamientos para transiciones y animaciones fue una de las innovaciones de CSS3. Durante años, los desarrolladores front-end han estado solicitando la opción de crear estas interacciones utilizando HTML y CSS en lugar de JavaScript o Flash.
Cuando cambia el estado de un elemento, como pasar el cursor sobre él, enfocarlo, activarlo o apuntarlo, puede usar las transiciones de CSS3 para modificar su apariencia y comportamiento.
Las animaciones CSS3 le permiten cambiar la apariencia y el comportamiento de un elemento en numerosos fotogramas clave. Las transiciones le permiten pasar de un estado a otro, mientras que las animaciones establecen muchos puntos de transición basados en distintos fotogramas clave.
En este artículo, veremos los ejemplos de transición CSS deslizante desde la izquierda.
Deslizar desde la transición izquierda en CSS
Este ejemplo usa translateX y translateY para mover el elemento del punto A al B. La función de traducción le permite mover el elemento a través del plano (ejes x e y).
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Slide-in Transition</title>
</head>
<style>
.element {
width: 200px;
height: 200px;
background: blue;
animation: moveToRight 1s ease-in-out;
animation-delay: 10ms;
}
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
</style>
<body>
<div class="element"></div>
</body>
</html>