Anímate con CSS3

TLP Innova 2013

Que es eso del GDG?

(una secta?)

Google Developer Groups (GDG) es una comunidad mundial interesada en aprender, utilizar y promover las múltiples tecnologías de aplicaciones que ofrece Google. Está centrada en los desarrolladores y en contenido de tipo técnico educativo.(+Info: gdgtenerife.com)

Description

Pata todos los públicos

(sí, para ti también, aunque no tengas mucha idea de CSS)

Description

Y yo quien soy?

y a que me dedico?

Soy:Diseñador Web&UI Freelance.

Hago: Interfaces de usuario para WebApps, Mobile Apps, y webs corporativas y de producto.

...

Sí, vale. El de "y ahora lo que han hecho los chicos de programación me lo pones bonito."

http://juanmapd.com/

De que va esta charla que os voy a soltar?

(venga quedate que es interesante)

Va de: “como animar objetos html mediante las propiedades de CSS3: Animation, Transition y Transform”

Para: Programadores Front-End, Maquetadores HTML/CSS, Diseñadores o cualquiera que quiera añadir detalles de animaciones que hagan destacar su interfaz.

Indice

y todo esto vamos a ver...

  • Ventajas y desventajas
    • Jquery Vs Css3
    • Soporte en navegadores
    • FallBack
  • Prefijos Propietarios
  • Transiciones
  • Transformaciones
  • Animaciones
  • Ejemplos de uso
  • Colecciones de Animaciones
  • Referencias

Ventajas y desventajas

Pros y contras del uso de animaciones CSS3

Ventajas y desventajas

Que opciones hay para animar objetos Html?

Description vs Description

* U otras librerias JS como Mootools, Prototype o simplemente JS.

Ventajas y desventajas

Ejemplo en Jquery y en CSS3

En Jquery

  $('div').animate({
      opacity: 0.25
  }, 1000);
      

En CSS3

. fade {
  transition: 1s;
  opacity: 0.25;
}
      

Ventajas y desventajas

Ventaja 1: Separamos completamente la presentación del código JS

Creamos la clase

. fade {
  transition: 1s;
  opacity: 0.25;
}
      

Se la añadimos al objeto a animar

$('button').click(function() {
    $('div').addClass('fade');
});
      

Ventajas y desventajas

Ventaja 2: El rendimiento es mejor

Tiempo en animar 300 divs con Jquery: 5s.

Description

Tiempo en animar 300 divs con CSS: 2.9s

Description

Fuente: http://dev.opera.com/articles/view/css3-vs-jquery-animations/

Ventajas y desventajas

Ventaja 2: El rendimiento es mejor

Memoria consumida al final de la animación con Jquery: 6 MB

Description

Memoria consumida al final de la animación con CSS3: 1.5 MB

Description

Fuente: http://dev.opera.com/articles/view/css3-vs-jquery-animations/

Ventajas y desventajas

Ventaja 2: El rendimiento es mejor

¿Por qué CSS3 gana de calle?

La gran diferencia de rendimiento es provocada por que el procesador de CSS del navegador esta escrito en C++ y el código nativo se ejecuta muy rápido, en cambio jQuery (JavaScript) es un lenguaje interpretado.

Y uso de GPU

En navegadores modernos algunos efectos de CSS3 son renderizados por la GPU para acelerarlos aún más.

Ventajas y desventajas

CSS3 Win!

Usar CSS3 es un...

Description

Ventajas y desventajas

Desventajas

Ninguna desventaja...

Buuueno ok, el soporte de algunos navegadores.

Description

Ventajas y desventajas

Soporte de Navegadores

78% de los usuarios tienen soporte

Description

Fuente: http://caniuse.com/

Ventajas y desventajas

Soporte de Navegadores

No hay soporte en IE8 y el soporte en IE9 es muy parcial

Description

Ventajas y desventajas

Soporte de Navegadores

IE9 no soporta keyframes, animation, transform ni transition

Description

Fuente: http://www.w3schools.com/cssref/css3_browsersupport.asp

Ventajas y desventajas

Soporte de Navegadores

IE10 esta subiendo rápidamente

Description

Fuente: http://w3counter.com/trends

Ventajas y desventajas

Soporte de Navegadores

¿Que hacemos mientras con ese

20%

de usuarios que no tienen soporte?

Ventajas y desventajas

Soporte de Navegadores

Umm....

Description

Ventajas y desventajas

Soporte de Navegadores

Si el navegador no soporta las propiedades que necesitamos de CSS3, tenemos las siguientes opciones:

1. Recurrir a un método alternativo:
Detectar si no hay soporte y presentar animaciones alternativas en JS

2. No mostrar las animaciones:
Si no es un elemento crítico del proyecto

Ventajas y desventajas

Fallback

Para construir un Plan B en caso de que el navegador no soporte las propiedades CSS3 necesarias:

1. Detectar la disponibilidad en el navegador de las propiedades

Description

2. Crear el equivalente en JS (Jquery) de la animación o efecto

Ventajas y desventajas

Fallback

Con modernizr, si es un navegador CON la propiedad soportada

<html class="js csstransitions ... ">
<style type="text/css">       
.csstransitions #element{
transition: ... ;
}
</style> 

Ventajas y desventajas

Fallback

Con modernizr, si es un navegador SIN la propiedad soportada

<html class="js no-csstransitions ... ">
<script type='text/javascript'>
if(!Modernizr.csstransitions)
    $("#element").hover(function(){ $(this).animate({ ... animación ... }, 5000); });
</script>

Ventajas y desventajas

Fallback

Conseguido!

Description

Prefijos Propietarios

(Vendor Prefixes) Uso y recomendaciones

Prefijos de Navegador (Vendor Prefixes)

Que son?

Los vendors prefixes hacen referencia a prefijos que colocan los fabricantes de navegadores delante de ciertas propiedades.

Las propiedades con estos prefijos nos indican que aún no han llegado a ser un estándar aprobado por la W3C o que están en fase experimental.

.box_scale {
  -webkit-transform: scale(0.8);  /* Chrome, Safari 3.1+ */
     -moz-transform: scale(0.8);  /* Firefox 3.5+ */
      -ms-transform: scale(0.8);  /* IE 9 */
       -o-transform: scale(0.8);  /* Opera 10.50-12.00 */
          transform: scale(0.8);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

Nota: Podemos usar http://css3please.com/ como referencia.

Prefijos de Navegador (Vendor Prefixes)

Como automatizarlos?

Y si no queremos repetir todas esas líneas a mano?

1. Usar un Script que en tiempo de ejecución añada los prefijos

Ej: Prefix-Free (leaverou.github.io/prefixfree/)

Description

2. Pasar el CSS por un script para añadir los prefijos

Ej: Prefixr (prefixr.com)

Description

3. Usar el CSS3 Mixins de los preprocesadores de CSS como Less o Sass.

Ej: Less (lesscss.org), Sass (sass-lang.com/)

Description Description

Transiciones

(CSS3 Transitions)

Transiciones

Definición

"Las transiciones CSS3 permiten realizar cambios en los valores CSS de manera progresiva durante un tiempo determinado"

W3C: http://www.w3.org/TR/css3-transitions/

Es decir, las transiciones nos permiten que el cambio de un valor a otro en las propiedades de CSS de una etiqueta se produzca de forma animada en base a unos parámetros que determinarán cómo se llevará a cabo dicha transición.

Transiciones

Como funciona la propiedad CSS Transitions?

1. Especificar la propiedad CSS a la que queremos añadir el efecto

2. Especificar la duración del efecto

3. Especificar el comportamiento de la velocidad (opcional)

4. Especificar la pausa antes de comenzar el efecto (opcional)

transition: width 2s;
transition: width 2s, height 2s; /* para más de un efecto */
transition: width 2s linear 1s; /* con parametros extra */

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

Transiciones

Funciones de velocidad

ValueDescription
linearSpecifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
easeSpecifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
ease-inSpecifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-outSpecifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
cubic-bezier(n,n,n,n)Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1

Transiciones

Propiedades animables

Property Name Type
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

Transiciones

Ejemplo

Ejemplo 1

#demo1 {
width: 100px;
height: 100px;
background: red;
transition: width 0.5s linear 0.1s;
}

#demo1:hover {
width:200px;
}

Nota: Código simplificado sin prefijos.

Transformaciones

(CSS3 Transforms)

Transformaciones

Definición

"Las transformaciones CSS3 permiten a los elementos ser transformados en un espacio bi-dimensional o tri-dimensional"

W3C: http://www.w3.org/TR/css3-transforms/

Es posible aplicar rotaciones, escalas, ángulos y desplazamientos a cualquier elemento DOM.

Transformaciones

Como funciona la propiedad CSS Transform?

1. Especificar el tipo de transformación

2. Especificar el valor

  -webkit-transform: rotate(7.5deg); 
     -moz-transform: rotate(7.5deg); 
      -ms-transform: rotate(7.5deg); 
       -o-transform: rotate(7.5deg); 
          transform: rotate(7.5deg); 

Transformaciones

Tipos de transformaciones

Value Description
none Defines that there should be no transformation
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y) Defines a 2D translation
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a translation, using only the value for the X-axis
translateY(y) Defines a translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale(x,y) Defines a 2D scale transformation
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by giving a value for the X-axis
scaleY(y) Defines a scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis
perspective(n) Defines a perspective view for a 3D transformed element

Transformaciones

Ejemplo

Ejemplo 2

#demo2 {
  width: 100px;
  height: 100px;
  background: red;
  transform: rotate(45deg);
}

Nota: Código simplificado sin prefijos.

Transformaciones

Ejemplo

Ejemplo 3

#demo3 {
  width: 100px; height: 100px; background: red;
  transition: transform 0.8s;
}

#demo3:hover {
  transform: rotate(45deg);  
}

Nota: Código simplificado sin prefijos.

Transformaciones

Ejemplo

Ejemplo 4

#demo4 {
  width: 100px; height: 100px; background: red;
  transition: transform 0.8s, width 1.8s, height 1.8s; 

}
#demo4:hover {
  width: 150px;
  height: 150px;
  transform: rotate(45deg);  
}

Nota: Código simplificado sin prefijos.

Animaciones

(CSS3 Animations)

Animaciones

Definición

"Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro."

W3C: http://www.w3.org/TR/css3-animations/

Las animaciones constan de dos componentes: un estilo que describe la animación y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

Animaciones

Como funcionan las animaciones CSS?

1. Crear los fotogramas clave de la animación con @keyframe

2. Asociarlos al selector especificando los parametros: nombre y duración (como mínimo)

@keyframes miAnimacion {
from {background: red;}
to {background: yellow;}
}
div {
animation: miAnimacion 5s;
}

Animaciones

Tipos de propiedades

Property Description
@keyframes Specifies the animation
animation A shorthand property for all the the animation properties, except the animation-play-state property
animation-name Specifies the name of the @keyframes animation
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0
animation-timing-function Describes how the animation will progress over one cycle of its duration. Default "ease"
animation-delay Specifies when the animation will start. Default 0
animation-iteration-count Specifies the number of times an animation is played. Default 1
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"
animation-play-state Specifies whether the animation is running or paused. Default "running"

Animaciones

Ejemplo

Ejemplo 5

@keyframes animademo5 {
  0% { width: 100px; background: red; }
  50% { width: 200px; background-color: yellow; }
  100% { width: 400px; background-color: green; }
}
#demo5 {
  height: 100px;
  animation-name: animademo5;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

Nota: Código simplificado sin prefijos.

Ejemplos de uso

Ejemplos "para la vida real"

Ejemplos de uso

Botón de login con "shake"

Description

Password :

Ejemplos de uso

Botón de login con "shake"

@keyframes shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
  animation-duration:1s; 
  animation-name: shake;
}
<div id="demo-login">
  <form class="form">
    <button class="login" type="button">Login</button>  
  </form>
</div>
  $(".login").click(function() {  
    $("#demo-login").addClass("shake");   
  });

Colecciones de Animaciones

Animaciones "listas para usar"

Colecciones de Animaciones

Animaciones "listas para usar"

Colecciones de Animaciones

Plugin Jquery para animaciones CSS3

Referencias

Enlaces de interes

Referencias

Más información sobre el tema...

Referencias

Que se puede llegar a hacer...

Gracias!

Preguntas? Dudas?

Puedes volver a ver esta presentación en:
http://gdgtenerife.com/TLP/animate