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 : 10779  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 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

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Guía de Flexbox: las bases

En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox. Pero cuidado, no estamos hablando de una simple…

Grid CSS: la unidad fraccionaria

La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS. Finjamos que nos olvidamos de la Grid CSS o de las…

CSS3: Selectores avanzados y pseudo clases. Descripción, uso y ejemplos

Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para…

Que son y Como funcionan las medidas VH y VW de CSS3

  Seguro muchos de nosotros conocemos las unidades px, em, rem, % y pt, pero quizás no todos conocían o usan las unidades de medida vh y vw. Hoy vamos a conocer…

Plugins jQuery para Efectos de Transición de Páginas con CSS3

Todo el mundo sabe que si desea más tráfico en su sitio web y quiere estar en la cima de los resultados de búsqueda también debe tener la página web…

15 increíbles tutoriales para generar efectos de texto con CSS3

Normalmente para añadir efectos sobre textos utilizamos algunos trucos y efectos de Photoshop, pero si hablamos de diseño web entonces podemos conseguir efectos realmente impresionantes tan solo aplicando algo de…

8 útiles herramientas para optimizar CSS

La optimización es una parte fundamental del desarrollo y mantenimiento de un sitio web, algo que a menudo, por falta de tiempo, se nos olvida. La optimización de una web es…

25 Tutoriales CSS3 para efectos avanzados de interfaz de usuario

En este artículo os presentaremos una lista de 25 excelentes tutoriales css3 a través de los cuales podráis aprender los trucos CSS3 de las interfaces avanzadas. 1. Interactive Infographic with SVG…

Clicky