Animacion ccs

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