Á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