Animaciones con CSS3 (v. 2013) http://www.xpert.co/cursos-adobe/
Marlon Ceballos -‐ @adobexpert Adobe Community Professional / Adobe Cer;fied Instructor
Adobe
Consulting
Adobe
Consulting
www.xpert.co
COMMUNITY PROFESSIONAL
CERTIFIED INSTRUCTOR
Design Master - Web Master
CERTIFIED INSTRUCTOR
@adobexpert
CERTIFIED INSTRUCTOR
Design Master / Web Master
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Por qué animar con CSS? Sintaxis simple y familiar • Menor consumo de recursos • Soporte creciente en navegadores. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Ten en cuenta!
•
Usa animaciones CSS solamente si el mensaje NO se pierde al NO ejecutarse la animación.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Prefijos propietarios -‐moz-‐ Firefox • -‐o-‐ Opera • -‐webkit-‐ Safari, Chome, Konqueror • -‐ms-‐ Explorer 9 y superior. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Soporte en navegadores
www.caniuse.com
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Transformaciones  CSS
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Transformaciones CSS
•
www.w3.org/TR/css3-‐transforms/: CSS transforms allows elements styled with CSS to be transformed.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Transformaciones CSS translate • rotate • scale • skew •
•
transform: func;on(valor). www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
translate() transform: translate(x, y) • transform: translateX(valor) • transform: translateY(valor). •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
rotate()
•
transform: rotate(valor)
deg: grados • grad: gradianes • rad: radianes • tunr: giros. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
scale() transform: scale(x, y) • transform: scaleX(valor) • transform: scaleY(valor). •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
skew() transform: skew(x, y) • transform: skewX(valor) • transform: skewY(valor). •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Punto de transformación
•
transform-‐origin: x y
•
right, leW, top, boXtom, center, 10px.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
MúlHples transformaciones
•
transform: func;on1(valor) func;on2(valor) func;on3(valor).
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Transformaciones interacHvas :hover • :focus •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Transiciones CSS
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Transiciones CSS
•
www.w3.org/TR/css3-‐transi>ons/: CSS Transi>ons allows property changes in CSS values to occur smoothly over a specified dura>on.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Sintaxis transiciones CSS
•
transi;on-‐property: propiedad.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
transiHon-‐duraHon Determina la duración de la transición • El valor por defecto es 0 • No se pueden usar valores nega;vos. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
transiHon-‐Hming-‐funcHon ease: (default) lento-‐acelera-‐desacelera • linear: constante • ease-‐in: lento-‐acelera • ease-‐out: rápido-‐desacelera • ease-‐in-‐out: lento-‐acelera y linear-‐desacelera • cubic-‐bezier: curvas personalizadas •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
transiHon-‐delay
•
Define el ;empo de inicio de una transición.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Shorthand notaHon
•
transi;on: duración | propiedad | aceleración | delay
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
MúlHples transiciones transi;on-‐property: propiedad1, propiedad2... • trans;on-‐dura;on: duración1, duración2... • transi;on-‐;ming-‐func;on: acelaración1, acelaración1... • transi;on-‐delay: delay1, delay2... •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Animaciones CSS
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Animaciones CSS
•
www.w3.org/TR/css3-‐transforms/: A way for authors to animate the values of CSS proper>es over >me, using keyframes. The behavior of these keyframe anima>ons can be controlled by specifying their dura>on, number of repeats, and repea>ng behavior.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Etapas de la animación Creamos la animación con keyframes • Asignamos la animación. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Sintaxis de la animación
•
@keyframes nombre { from {valor inicial} to {valor final} }
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Sintaxis de la asignación
•
anima;on-‐name: nombre
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
animaHon-‐duraHon Duración de la animación • El valor por defecto es 0 • No se admiten valores nega;vos. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
animaHon-‐Hming-‐funcHon Las mismas opciones de transi>on-‐>ming-‐func>on • Es aplicado en el espacio entre keyframes. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
animaHon-‐delay
•
Define el momento en que inicia una animación.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
animaHon-‐iteraHon-‐count Define el número de veces que se ejecuta la animación • El valor por defecto es 1 • El valor infinite genera una repe;ción sin fin • Permite valore decimales • Los valores nega;vos no son permi;dos. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
animaHon-‐direcHon Permite ejecutar las animaciones en reversa • El >ming también se ejecuta en reversa • normal • reverse • alternate: anima en cliclos normal y reversa • alternate-‐reverse: anima en cliclos reverse y normal. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
MúlHples animaciones
•
@keyframes nombre { from {valorInicial1 valorInicial2 valorInicial3...} to {valorFinal1 valorFinal2 valorFinal3...} }
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
MúlHples animaciones
•
@keyframes nombre1 { from {valor inicial} to {valor final1 } } @keyframes nombre2 { from {valor inicial}
to {valor final1 } } • anima;on-‐name: nombre1, nombre2; anima;on-‐dura;on: 1s 2s; ...
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Sintaxis animación con porcentajes
•
@keyframes nombre { 0% {valor inicial} 50% {valor intermedio} 100% {valor final} }
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
animaHon-‐play-‐state Permite pausar o ejecutar la animación • paused • running. •
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Shorthand notaHon
•
anima;on: nombre | duración | ;ming | delay | itera;on | direc;on
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
@adobexpert
Gracias! www.xpert.co/contacto/
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR