• Ground Rules for Web Animations: Reglas para cuando usar animaciones

• Drag & Drop
• Transformaciones
• Transiciones
• Animaciones

• API de HTML 5

• Animaciones y transiciones CSS: Vídeo de Youtube

• Transformaciones 2D
  • matrix(n,n,n,n,n,n)
  • translate(x,y)
  • translateX(n)
  • translateY(n)
  • scale(x,y)
  • scaleX(n)
  • scaleY(n)
  • rotate(angle)
  • skew(x-angle,y-angle)
  • skewX(angle)
  • skewY(angle)
• Transformaciones 3D
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
  • translate3d(x,y,z)
  • translateX(x)
  • translateY(y)
  • translateZ(z)
  • scale3d(x,y,z)
  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)
  • rotate3d(x,y,z,angle)
  • rotateX(angle)
  • rotateY(angle)
  • rotateZ(angle)
  • perspective(n)

• CSS3 Transitions
• CSS3: Animations vs. Transitions
• Transiciones vs. Animaciones

• CSS3 Animations
  • @keyframes
  • animation-name: Nombre
  • animation-duration: Duración en segundos.
  • animation-delay: Retraso en empezar
  • animation-iteration-count: Nª de repeticiones
  • animation-direction: Si va desde el principio al final o al revés, etc. {normal,reverse,alternate,alternate-reverse}
  • animation-timing-function: El progreso. {ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)}
    • cubic-bezier: Genera tu propia función
  • animation-fill-mode: Que CSS se aplica cuando acaba. {none,forwards,backwards,both}
  • animation: La unión de todas las de antes

• Timeout

• Ejemplos:
  • Ejemplo de animación de alas de mariposa
  • 404
  • Reloj
  • Escaleras
  • Cuadros animados

• Drag & Drop
  • Dragula: Alto nivel
  • interact.js: Bajo nivel
• Animaciones
  • Top 9 Animation Libraries to Use in 2016
  • Animate.css
  • Magic Animations

Crea un programa en JavaScript+HTML+CSS que un rectángulo rojo vaya modificando el ancho desde lo 100px a los 600px y que tarde 4 segundos

Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos.

Modifica el anterior ejercicio para que la animación solo se haga al pulsar un botón

Modifica el anterior ejercicio para que se haga grande al pulsar el botón pero si lo vuelves a pulsar que se haga otra vez pequeño

Crea un programa en JavaScript+HTML+CSS de un puzzle. En la parte superior estarán las 4 imágenes del puzzle sin colocar. En la parte imferior, habrá un cuadro con los 4 huecos a colocar.

Separa todo lo que puedas la parte visual de la lógica del puzzle

Para ello crea una clase Puzzle que no contenga nada de parte visual.

• Al arrastrar el icono de "Avión despegando" sobre el texto de "Nº de Vuelos Despegados" se incrementará en 1 el valor
• Al arrastrar el icono de "Avión aterrizando" sobre el texto de "Nº de Vuelos Aterrizados" se incrementará en 1 el valor
• Al arrastrar el icono de "Nº de Vuelos Despegados" sobre el icono de "La papelera" se decrementará en 1 el valor
• Al arrastrar el icono de "Nº de Vuelos Aterrizados" sobre el icono de "La papelera" se decrementará en 1 el valor

Solución