Transiciones y Transformaciones Css : Guia Básica con Ejemplos

by Silvia Mazzetta Date: 20-11-2019 css3 transiciones transformaciones html5


Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript.

A partir de este mismo año 2019, las transiciones son finalmente soportadas por todos los navegadores modernos. Si desea utilizar transiciones en navegadores antiguos, es necesario utilizar prefijos como -webkit- , -moz- o -o- . Para mayor información sobre la compatibilidad con diferentes navegadores, consultar el sitio web Can I use.

Vamos a empezar este tutorial explicando qué son las transiciones. Las transiciones no son otra cosa que el efecto de un cambio en el estado de un elemento de forma gradual en un intervalo de tiempo. Cuando hablamos de cambio de estado nos referimos a cambios en los valores de sus propiedades.

 

Las Transiciónes

 

Para aplicar una transición a un elemento tenemos que utilizar la propiedad transition. Aunque está propiedad ya la podemos considerar un estándar, es recomendable el uso de prefijos para que funcione en versiones antiguas de los navegadores.

 
.selector {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay
}
}
transition:  all 2s ease 1s;
transition: background-color 1s ease, height 2s ease-in 1s, margin-bottom 1s linear 3s;
 
  • Transition-property : Especifica el nombre de la propiedad CSS sobre el que se va a realizar el efecto de transición. Utilizamos ‘ all ’ si queremos que se aplique sobre todas las propiedades o ‘’ none ’ para ninguna. Debemos ttener en cuenta que no todas las propiedades css son compatibles con las transiciones, en el siguiente enlace podéis encontrar la lista: http://www.w3.org/TR/css3-transitions/#animatable-properties
  • Transition-duration : Como su nombre indica, especifica la duración de la transición en segundos o milisegundos (ejemplo: 2s, 150ms).
  • Transition-timing-function : Especifica la curva de velocidad de la transición, es decir, si queremos que mantenga una velocidad constante, o un comienzo o final rápido, lento, etc. En concreto podemos utilizar los siguientes:
    1. Linear: Mantiene la misma velocidad de principio a fin.
    2. Ease: Comienzo lento, luego rápido y termina lento.
    3. Ease-in: Comienza lento, y después mantiene velocidad.
    4. Ease-out : Mantiene velocidad con un final lento.
    5. Ease-in-out: Comienzo y fin lentos, muy similar a ease sólo que este último empieza más rápido de lo que termina.
    6. Cubic-bezier : Este es un poco más complejo, no voy a entrar en detalle, pero podemos configurar la curva de velocidad a nuestro gusto utilizando la función cúbica de Bezier. Acepta cuatro valores entre 0 y 1.
 

Valores Bezier predeterminados

 
  • ease , equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear , equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in , equivalente a cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out , equivalente a cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out , equivalente a cubic-bezier(0.42, 0, 0.58, 1.0)

  • Transition-delay: Especifica el tiempo de retardo en segundos o milisegundos antes del comienzo de la transición.
 

La sintaxis

 
/* nombre de la propiedad | duración */
transition: margin-left 4s;
/* nombre de la propiedad | duración | retardo */
transition: margin-left 4s 1s;
/* nombre de la propiedad | duración | función | retardo */
transition: margin-left 4s ease-in-out 1s;
/* Aplicar a 2 propiedades */
transition: margin-left 4s, color 1s;
/* Aplicar a todas las propiedades que cambien */
transition: all 0.5s ease-out;>
 

Vamos a ver algunos ejemplos:

 

EXAMPLE 1: A HOVER

 
<a>Soy un Link</a>
<style>
a {
background: #DDD;
color: #222;
padding: 2px;
border: 1px solid #AAA;
}
a:hover {
background: #FFF;
color: #666;
padding: 8px 14px;
border: 1px solid #888;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-in;
}
</style>
 

EXAMPLE 2: MENU

 
<div class="sidebar">
<p><a class="menuButton" href="home">Inicio</a></p>
<p><a class="menuButton" href="about">Acerca de</a></p>
<p><a class="menuButton" href="contact">Contacto Us</a></p>
<p><a class="menuButton" href="links">Vínculos</a></p>
</div>
<style>
.menuButton {
position: relative;
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color, color;
-o-transition-duration: 1s;>
text-align: left;
background-color:  #3D9EEF;
left: 5px;
top: 5px;
height: 26px;
color: white;
border-color: #3D9EEF;
font-family: sans-serif;
font-size: 20px;
text-decoration: none;
-moz-box-shadow: 2px 2px 1px black;
padding: 2px 4px;
border: solid 2px  #3D9EEF;
}

.menuButton:hover {
  position: relative;
  transition-propery: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  background-color:white;
  color:black; -moz-box-shadow: 2px 2px 1px black; }
</style>

 

EXAMPLE 3: TRANSICIÓN DE UN CUADRADO

 
<div id="no-transition" class="cuadrado">
No-Transition
</div>
<div id="transition" class="cuadrado">
Transition
</div>
<style>
.cuadrado{
width:150px;
height:150px;
background-color:#2980b9;
margin: 20px;
color:#fff;
line-height:150px;
}
.cuadrado:hover{
background-color:#c0392b;
width:200px;
box-shadow:0px 0px 6px #000;
}
#transition{
-webkit-transition: background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
-moz-transition:background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
-o-transition: background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
-ms-transition:background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
transition: background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
}
</style>
 

Ejemplo 4: DE CUADRADO A CIRCULO

 
<div class="cuadrado">
Mi div
</div>
<style>
.cuadrado{
margin:30px auto;
width:200px;
height:200px;
backgrou**nd-color:#16a085;
color:#16a085;
line-height:300px;
font-size:25px;
text-align:center;
}


.cuadrado:hover{ 
width:400px; 
height:400px; 
border-radius:60%; 
background-color:#2c3e50; 
cursor:pointer; 
padding:30px; 
box-shadow:0px 2px 20px #000; 
color:#fff;
transition: width 1s ease,height 1s ease,background-color 2s ease-out, border-radius 2s ease-in-out, padding 1s ease 2s, box-shadow 1s ease 2s, color 3s linear; 
} 


</style>


 

La propiedad Transform

Las transformaciones CSS permiten modificar la escala, rotación, sesgado, o el desplazamiento de un elemento. Trabajan en base a los ejes X e Y.

Es importante para la sintaxis de esta propiedad observar que no se deja espacio antes de los paréntesis.

 

Escalar

Permite agrandar o achicar un elemento respecto de su tamaño original. Se determina un número que indica proporción, de modo que si ponemos un dos, estaremos duplicando su tamaño, y si ponemos 0.5 estaremos reduciendo a la mitad. En el caso de usar un solo número la transformación se aplicará proporcionalmente sobre ambos ejes. Si indicamos dos números separados por coma, el primer número corresponde al eje X y el segundo al eje Y.

 
div { transform: scale(2) }
div { transform: scale(2, 0.5) }
 

Rotar

Nos permite girar un objeto en sentido horario (con un número positivo) o antihorario (negativo), se expresa en grados utilizando la abreviatura en inglés deg (degrees).

 
div { transform: rotate(45deg) }
 

Inclinar/Sesgar

 
div { transform: skew(30deg, 0) }
 

Trasladar

 

Permite mover un objeto en diferentes direcciones.

 
div { transform: translate(0, 200px) }
 

Usualmente las opciones de transformación no se utilizan por si solas sino que se las combina con la  propiedad transition .

 

EJEMPLO: 1 SCALE

 
<style>
.cuadrado {
background: darkturquoise;
border-radius: 5px;
height: 100px;
margin: 100px;
transition: transform 1s;
width: 100px;
}
.cuadrado :hover {
transform: scale(2);
}
</style>
 

EJEMPLO 2: ROTATE

<style>
.cuadrado {
background: darkturquoise;
border-radius: 5px;
height: 100px;
margin: 100px;
transition: transform 1s;
width: 350px;
}
.cuadrado :hover {
transform: rotate(120deg);
}
</style>
 

EJEMPLO 3 : TRANSLATE

 
<div class="cuadrado1"></div>
<div class="cuadrado2"></div>
<style>
.cuadrado1 {
background: #00aa9d;
border-radius: 3px;
height: 150px;
margin: 100px;
position: absolute;
transition: transform 0.8s;
width: 150px;
}
.cuadrado2 {
background: #2b3f;
border-radius: 3px;
height: 150px;
margin: 100px;
transition: transform 0.8s;
position: absolute;
width: 150px;
}
.cuadrado2:hover {
transform: translate(20px, 20px);
</style>
 

EJEMPLO 4 : SKEW

 
<style>
.cuadrado {
background: Khaki;
border-radius: 5px;
height: 150px;
margin: 100px;
transition: transform 1s;
width: 150px;
}
.cuadrado:hover {
transform: skewX(-20deg);
}
</style>



Abstract vector created by freepik - www.freepik.com
 
by Silvia Mazzetta Date: 20-11-2019 css3 transiciones transformaciones html5 visitas : 235  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 6 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Artículos relacionados