Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Bailes Latinos
Next
Download to read offline and view in fullscreen.

1

Share

Animaciones y transiciones en CSS: Que empiece el baile

Download to read offline

Slides del taller sobre "Animaciones y Transiciones en CSS"

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Animaciones y transiciones en CSS: Que empiece el baile

  1. 1. Transiciones y animaciones CSS - ¡Que empiece el baile! Transiciones y animaciones CSS ¡Que empiece el baile! Madrid – 27 de Noviembre de 2015
  2. 2. Transiciones y animaciones CSS - ¡Que empiece el baile! 1. Introducción 2. Transiciones CSS 3. Animaciones CSS Índice Luis Calvo Díaz Senior Front Developer en Paradigma Tecnológico @LuisCalvoDiaz Autor
  3. 3. Transiciones y animaciones CSS - ¡Que empiece el baile! 1 Introducción Objetos embebidos Programación
  4. 4. Transiciones y animaciones CSS - ¡Que empiece el baile! 1 Introducción Transiciones Proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que éstos se produzcan de manera instantánea Animaciones Permiten crear secuencias de acciones sobre un elemento HTML
  5. 5. Transiciones y animaciones CSS - ¡Que empiece el baile! 2 Transiciones CSS Para crear un efecto de Transición basta con especificar la propiedad (o propiedades) que van a cambiar y la duración de la transición, por ejemplo: transition: width 2s Además contamos con las siguientes propiedades: • transition-delay • transition-timing-function Linear Ease Ease-in Ease-out Ease-in-out transition: width 2s linear 1s Podemos usar también:
  6. 6. Transiciones y animaciones CSS - ¡Que empiece el baile! 2 Transiciones CSS
  7. 7. Transiciones y animaciones CSS - ¡Que empiece el baile! 2 Animaciones CSS Para crear una animación sobre un elemento HTML necesitamos especificar, al menos, el “animation-name”, “animation-duration” y los “keyframes” que conforma la secuencia de la animación a realizar. Por ejemplo: @keyframes ejemplo { from {background-color: red;} to {background-color: yellow;} } div { width: 100px; height: 100px; background-color: red; animation-name: ejemplo; animation-duration: 4s; } Los @keyframes podemos especificarlos también en forma de porcentajes: @keyframes ejemplo { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }
  8. 8. Transiciones y animaciones CSS - ¡Que empiece el baile! 2 Animaciones CSS Además contamos con las siguientes propiedades que nos ayudan a parametrizar y definir con más detalle nuestra secuencia de animación: • animation-timing-function • animation-delay • animation-iteration-count : número de veces (por defecto 1), “infinite”, “initial” (1) o “inherit” • animation-direction: “normal” (por defecto) “reverse” (comienza desde el final), “alternate” y “alternate-reverse” • animation-fill-mode: por defecto la animación no surtirá efecto antes de que comience ni después de terminar, pero podemos modificar esto con “backwards” (antes de la animación se aplicarán los estilos del keyframe 0%), “forwards” (cuando finalice la animación, el elemento se quedará con los estilos del keyframe 100%), “both” (ambos) o “normal” (es el valor por defecto, ninguno de los anteriores) Podemos usar el siguiente atajo: animation: [animation-name] [animation-duration] [animation-timing-function] [animation- delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];
  9. 9. Transiciones y animaciones CSS - ¡Que empiece el baile! 2 Animaciones CSS
  10. 10. Transiciones y animaciones CSS - ¡Que empiece el baile! ¡Muchas gracias! Buscamos talento: rrhh@paradigmadigital.com
  • EstherAmil

    Jan. 8, 2016

Slides del taller sobre "Animaciones y Transiciones en CSS"

Views

Total views

946

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

17

Shares

0

Comments

0

Likes

1

×