CSS3

Animaciones

Transiciones

Permiten pasar un estilo CSS a otro a partir de un cambio de estado del elemento HTML (:hover, :focus, :active, etc).

Transiciones

Son gestionadas mediante 4 propiedades CSS.

transition-delay
transition-duration
transition-property
transition-timing-function

Las cuales se pueden resumir en una única propiedad CSS

transition

Transiciones

Supongamos el siguiente código HMTL y CSS

<div class="redondo verdosa"></div>

.redondo {
  height: 100px;
  width: 100px;
  border-radius: 50px;
}

.verdosa {
  background-color: #00CED1;
}

Transiciones

Posibles valores para la propiedad transition-property.

background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color

border-top-left-radius
border-top-right-radius
border-top-width
bottom
color
font
font-size
font-size-adjust
font-stretch
font-weight
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top

max-height
max-width
min-height
min-width
opacity
padding
padding-bottom
padding-left
padding-right
padding-top
right
text-decoration-color
text-indent
top
vertical-align
visibility
width
word-spacing
z-index

Transiciones

Podemos expresar el tiempo de la transicion usando segundos o milisegundos.

.efecto {
  transition-duration: 2s;
}

.efecto2 {
  transition-duration: 0.5s;
}

.efecto3 {
  transition-duration: 200ms;
}

Transiciones

Agregamos una transicion mediante 2 propiedades CSS: transition-property y transition-duration.

.efecto {
  transition-property: width, height, border-radius;
  transition-duration: 2s;
}

.redondo:hover {
  height: 200px;
  width: 200px;
  border-radius: 100px;
}

<div class="redondo verdosa efecto"></div>

Transiciones

Algunos posibles valores que definen la velocidad de la transición son:

.efecto1 {
  transition-timing-function: ease;
}

.efecto2 {
  transition-timing-function: linear;
}

.efecto3 {
  transition-timing-function: ease-in;
}

.efecto4 {
  transition-timing-function: ease-out;
}

.efecto5 {
  transition-timing-function: ease-in-out;
}

Transformaciones

Permiten modificar un elemento HTML cambiando su tamaño, posición y visibilidad.

Transformaciones

Para lograrlo solo utiliza dos propiedades y según su valor sera el tipo de transformación a realizar.

transform-origin: especifica donde iniciara la transformación.
transform: especifica la transformación a realizar

Transformaciones

El valor rotate de la propiedad transform nos permite rotar un elemento en función de su posición original.

<div class="caja rotada-20"></div>
<div class="caja rotada-50"></div>

.caja {
  height: 100px;
  width: 100px;
  background: #00CED1;
  margin: 50px;
}

.rotada-20 {
  transform: rotate(20deg);
}

.rotada-50 {
  transform: rotate(50deg);
}

Transformaciones

El valor scale de la propiedad transform nos permite aumentar el tamaño de un elemento.

<div class="caja"></div>
<div class="caja doble"></div>

.caja {
  height: 100px;
  width: 100px;
  background: #00CED1;
  margin: 100px;
}

.doble {
  transform: scale(2);
}

Podemos aumentar un solo eje, o los ambos de forma dispares usando scaleX y scaleY.

Transformaciones

El valor translate de la propiedad transform nos permite mover un elemento en función de su posición original.

<div class="caja"></div>
<div class="caja transladado"></div>

.caja {
  height: 100px;
  width: 100px;
  background: #00CED1;
  margin: 50px;
}

.transladado {
  transform: translate(20%);
}

Podemos moverlo un solo eje, o los ambos de forma dispares usando translateX y translateY.

Transformaciones

El valor skew de la propiedad transform nos permite distorsionar un elemento.

<div class="caja"></div>
<div class="caja distorcion"></div>

.caja {
  height: 100px;
  width: 100px;
  background: #00CED1;
  margin: 50px;
}

.distorcion {
  transform: skew(10deg,5deg);
}

Podemos distorcionarlo un solo eje, o los ambos de forma dispares usando skewX y skewY.

Transformaciones

La propiedad transform nos permite modificar la perspectiva del elemento HTML de forma tal que nos permite generar un efecto 3D sobre el mismo.

Transformaciones

El valor perspective de la propiedad transform nos permite representar un elemento en 3D.

<div class="caja"></div>
<div class="caja tridimencional"></div>

.caja {
  height: 100px;
  width: 100px;
  background: #00CED1;
  margin: 50px;
}

.tridimencional {
  transform: perspective(200px) rotateX(45deg);
}

Al cambiar la perspectiva podemos utilizar los siguientes valores skewZ, rotateZ, scaleZ, translateZ.

Animaciones

Permiten animar la transición entre un estilo CSS y otro pero con la particularidad de poder definir varios estados intermedios.

Animaciones

Son gestionadas mediante 8 propiedad CSS.

animation-delay
animation-direction
animation-duration
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
animation-fill-mode

Las cuales se pueden resumir en una única propiedad CSS

animation

Animaciones

Supongamos el siguiente código HMTL y CSS

<div class="redondo verdosa"></div>

.redondo {
  height: 100px;
  width: 100px;
  border-radius: 50px;
}

.verdosa {
  background-color: #00CED1;
}

Animaciones

Mediante animation-name le definimos un nombre a nuestra animación.

.animado {
  animation-duration: 3s;
  animation-name: ingresa;
}

Ahora podemos definir como serán los fotogramas de nuestra animación.

<div class="redondo verdosa animado"></div>

Animaciones

Definimos los fotogramas utilizando la regla @keyframes.

.animado {
  animation-duration: 3s;
  animation-name: ingresa;
}

@keyframes ingresa {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

Animaciones

Podemos agregar fotogramas intermedios utilizando porcentajes en función de la duración de la animación.

@keyframes ingresa {
  from {
    margin-left: 100%;
  }

  30% {
    margin-left: 50%;
  }

  60% {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

Animaciones

Mediante animation-iteration-count definimos el numero de veces que se repetirá nuestra animación.

.animado {
  animation-duration: 3s;
  animation-name: ingresa;
  animation-iteration-count: 2;
}

Podemos utilizar el valor infinite para repetir la animación constantemente.

Animaciones

Mediante animation-direction definimos la dirección que tomara nuestra animación.

.animado {
  animation-duration: 3s;
  animation-name: ingresa;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Esta regla puede tomar los siguientes valores: normal, alternate, reverse y alternate-reverse.

Animaciones

Mediante animation-timing-function definimos la velocidad de nuestra animación.

.animado {
  animation-duration: 3s;
  animation-name: ingresa;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

Esta regla puede tomar los siguientes valores: ease, linear, ease-in, ease-out y ease-in-out.

Animaciones

Mediante animation-delay definimos una demora en nuestra animación lo que nos permite esperar segundos o mili segundos antes de iniciarla.

.animado {
  animation-duration: 3s;
  animation-name: ingresa;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}

Esta regla puede tomar valores expresados en:

segundos (s) o mili segundos (ms).

Animaciones

Mediante animation-play-state podemos pausar y reanudar nuestra animación.

.animado {
  animation-duration: 3s;
  animation-name: ingresa;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}

.animado:active {
  animation-play-state: paused;
}

Esta regla puede tomar dos valores:

running o paused.

Animaciones

Mediante animation-fill-mode define la forma en la que los estilos de nuestra animación son aplicados.

.animado {
  animation-duration: 3s;
  animation-name: ingresa;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

Esta regla puede tomar tres valores:

forwards, backwards y both.