Curso de Animaciones de SVG en CSS

www.devcode.la

Introducción

SVG en sí tiene una sintaxis construida en la animación, se llama

SMIL. SMIL es la abreviatura de Synchronized Multimedia Integration

Language.

www.devcode.la

Sublime Text

Material de Trabajo

Mac OS

Google Chrome

www.devcode.la

Propiedad de transición SVG

Una animación es un cambio gradual de una propiedad o atributo de un elemento. Por gradual se entiende que es un cambio progresivo en el tiempo y que puede apreciarse a simple vista.

www.devcode.la

Transiciones con fill y strock

Fill define el color dentro del objeto y stroke define el color de una

línea dibuja alrededor del objeto, cada uno de estos atributos se

aplican nuestros elementos svg

www.devcode.la

Transformaciones CSS

Las transformaciones CSS permiten cambiar la posición del contenido afectado, sin interrumpir el flujo normal

www.devcode.la

Rotate y Scale con CSS

www.devcode.la

Animaciones Secuenciales

Key-frames, la regla arroba @keyframes permite a nosotros controlar los pasos intermedios en una secuencia de animación CSS

www.devcode.la

Animaciones con Line Drawing

www.devcode.la

Animación de stroke-dasharray y stroke-dashoffset