Animaciones SVG con CSS3

Presentación para la charla en #vectoresIO, una iniciativa de DesarrolloWeb
04/07/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

SOPORTE

CanIuse

KEYFRAMES

@keyframes nombreDeLaAnimacion {
			0% {

			}
			100% {

			}
		}
		.nombre{
		animation: name duration timing-function delay iteration-count direction fill-mode;
		}

CheatSheet animaciones CSS3

Quién tiene un fix tiene un tesoro

Autoprefixer
Prefix-free
CSS3-syntax

Comienza la diversión

ANIMACIONES CSS3 EN HTML COMIENZAN DESDE 50% 50%

ANIMACIONES CSS3 EN SVG COMIENZAN DESDE 0% 0%

DEMO!

FFF

  1. SIN FIX
  2. CON FIX
  3. 
	.corregir {
	-moz-transform: translate(629px,427.2px);
	}
	.corregir polygon {
	-moz-transform: translate(-629px,-427.2px);
	}

    4. Estos valores solo funcionan con este ejemplo!!!

BIBLIOGRAFIA

Fix para rotaciones en Firefox

Kseso aporta otro FIX
Implementando transform-origin en WebKit (ENG)

F-IE

Las transformaciones CSS3 ejecutadas sobre SVG no funcionan en ninguna version de IE.

Vídeo en VIMEO

Una demo que contiene rectángulos creados con SVG y CSS. Todos animados con CSS3.

Una demo que contiene varias animaciones con transformaciones CSS3.

BIBLIOTECAS CSS3

ANIMATE.CSS

BOUNCEJS

ENLACES SVG * CSS3

Fix para rotaciones en Firefox

CheatSheet animaciones CSS3

Animando SVG de SMIL a CSS3

Animating SVG with CSS (ENG)

CSSConf Australia 2014 Chris Wright - Surprise and delight: CSS + SVG

CSS CONF 2014 por Sara Soueidan

DEMOS SVG * CSS3

COLLECIÓN CON TODAS LAS DEMOS DE LOS HANGOUTS

VISIBLE SPECTRUM

CITY & CLOCK/a>

NEW CAKE por Marco Barría