Animaciones SVG con SMIL&CSS3

Presentación para la charla en #vectoresIO, una iniciativa de DesarrolloWeb
29/05/2014

Sobre mi

!Buenas!
Me llamo Jorge, y trabajo como diseñador gráfico&web.

twitter.com/jorgeatgu

codepen.io/jorgeatgu

github.io/jorgeatgu

plus.google.com/+jorgeatgu

behance.net/jorgeatgu

SMIL SOPORTE en navegadores

CanIuse

Polyfill IE - FAKESMILE

Polyfill para IE9 y versiones posteriores. http://leunen.me/fakesmile/

FakeSmile funcionando en IE10/IE11

ETIQUETAS

  • Animate
  • Set
  • AnimateTransform
  • AnimateMotion
  • AnimateColor "deprecated" en SVG 2

Especificación SVG 1.1

Animate
DEMO CodePen

animateTransform

  • Translate
  • Rotate
  • Scale
  • SkeWX SkewWY

DEMO CodePen

animateMotion

Problemas(en FF) si no completamos el path donde gira el elemento

DEMO MDN

DEMO CodePen

SVG+SMIL

Animación en CodePen

DEMOS