Ángel Corral Arias

UX–Visual Designer

Interface Developer

Formador en FICTIZIA

@ancoar

¿y este quién es?

"Sujetando" el corazón…

.heart img {
    ·
    ·
    ·
    opacity: .75 ;
    transform-origin: 35% 30% ; 
    animation: pulse .8s infinite ease-out .75s ;
    }


@keyframes pulse {
    
    10% , 20%    {
        transform: scale(.9,.85) skewX(1deg) ;
        opacity: 1 ;
        }
}

simplemente usando la aceleración

animation-timing-function: ease-in-out

levitación con ease-in-out en eje Y


.flyingLighthouse {
    ·
    ·
    ·
    transform: translate3d( 0 , -50% , 0) ;
    animation: levitate 4s ease-in-out infinite alternate ;
    }

@keyframes levitate    {
		 
    100%    {
        transform: translate3d( 0 , -42% , 0) ;
        }
}

Sprite bidimensional

16020 x 1356 px

27 frames


.fakeGIF	{
	·
        ·
        ·
	background-image:url(http://url-sprite.jpg) ;
	background-position-x: 0 ;
	background-position-y: 0 ;
	animation: playX 2.7s infinite steps(9,end) ,
		   playY 0.3s infinite steps(3,end) ;
	}
	
@keyframes playX	{
    
    to	{
	background-position-x: -14418px ;
        }
}

@keyframes playY	{
    
    to	{
        background-position-y: -1356px ;
        }
}

Animando la background-position con los ejes por separado

.watchFace .mins.ticking   {
    ·
    ·
    ·
    animation: handsRotation 120s infinite linear ;
    animation-duration: 12s ; /* v = 10X */
    }

.watchFace .secs.ticking   {
    ·
    ·
    ·
    animation: handsRotation 60s infinite steps(60,end) ;
    }

animation-play-state: paused (en :hover)


.watchFace:hover .ticking  {
    animation-play-state: paused ;
    }

Maquetar sin tener en cuenta las animaciones


.animated    {
    .
    .
    .
    animation: intro .3s ease-out ;
    }


@keyframes intro    {

    from    {
        opacity: 0 ;
        transform: translate3d(0,-100%,0)
                   scale(.85) ;
        }
}

.animated    {
    .
    .
    ·
    opacity: 0 ;
    transform: translate3d(0,-100%,0)
               scale(.85) ;
    
    animation: intro .3s ease-out forwards ;
    }


@keyframes intro    {

    to    {
        opacity: 1 ;
        transform: translate3d(0,0,0)
                   scale(1) ;
        }
}

Buscando problemas :(

YEAH!

polyline , polygon {
    stroke-width: 1px ;
    stroke-dasharray: 1000 ;
    stroke-linecap: round ;

    stroke: transparent ;
    stroke-dashoffset: 0 ;
    
    animation: draw 3s infinite ;
    }

@keyframes draw {
    
    0% {       
        fill: transparent ;
        stroke: #000 ;
        stroke-dashoffset: 1000 ;
        }
}

Un montón de atributos

clip-rule, flood-color, flood-opacity, stop-opacity, kerning, tech-anchor, color-profile, color-rendering, fill, fill-opacity, fill-rule, marker, marker-end, marker-mid, marker-start, stroke, stroke-width, stop-color, lighting-color, enable-background, dominant-baseline, color-interpolation-filters, color-interpolation, glyph-orientation-horizontal, glyph-orientation-vertical, shape-rendering, baseline-shift, alignment-baseline, stroke-miterlimit, stroke-linejoin, stroke-linecap, stroke-dashoffset, stroke-dasharray, stroke-opacity

SVG

Las animaciones como activo para mejorar la UX

Aportan contexto

Ofrecen feedback al usuario

Dirigen la atención

  • Que describen procesos y muestran resultados

  • Que aportan información secundaria

Cuentan historias

SUTILEZA

Las animaciones pueden ser el mejor escudero, pero no dejan de ser más que un escudero.

No olvidar…

Aunque Homer no esté de acuerdo…

¡Gracias!

Ponencia en FrontFest 2017 — Animación CSS Avanzada de HTML y SVG para mejorar la UX

By Ángel Corral Arias

Ponencia en FrontFest 2017 — Animación CSS Avanzada de HTML y SVG para mejorar la UX

  • 754
Loading comments...

More from Ángel Corral Arias