Á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.