Propuesta Comercial Genial

Ivan Saez

CSS y HTML5

ANIMACIONES css

Resultados

Diferentes etiquetas

Contacto

Metodología

Antecedentes

Uso

Objetivos

Sobre nosotros

Índice

01

Uso

En este caso le estamos diciendo que el estado inicial es el color rojo y que pasará al color amarillo. Esto lo podemos aplicar al background color de una pagina web.

Uso de las animaciones en CSS

Para definir una secuencia de estilos que seguirá una animacion, ponemos @keyframes y el nombre de la animacion.

Las animaciones en CSS se usan, generalmente, para darle un estílo diferente a una pagina web

02

Diferentes etiquetas

05

01

04

02

06

03

07

animation-direction

animation-iteration-count

animation-delay

Etiquetas básicas

animation-timing-function

animation-duration

animation-name

animation

Animation-name: Se usa para darle un nombre a una animacion. Esto viene bien si quieres aplicar la misma animacion en distintos apartados de una pagina web

Animation: Se usa para aplicar la animacion definida con @keyframes Puede incluir el nombre, duración, cuantas veces queremos que se repita, el tipo de animacion, etc.

Animation & Animation-name

+ info

+ info

+ info

Animation-duration: Declara cuantos segundos dura la animacion Animation-timing-Function: Declara la velocidad de la animacion. Estos valores pueden ser: linear, ease, ease-in, ease-out, ease-in-out

Animation-duration & Animation-timing-function

Animation-direction:Se usa para determinar la direccion de la animacion. Esta puede hacia adelante (normal), hacia atrás (reverse), alternando hacia adelante y hacia atras (alternate) y alternando hacia atras y hacia delante (alternate-reverse)

Animation-iteration-count: Se usa para determinar cuantas veces quieres que se repita la animacion, esto puede ser un numero o "infinite"

Animation-delay: Se usa para declarar cuantos segundos quieres que tarde en que haga la animacion desde que el usuario se mete a la pagina. Aqui puedes poner "x" segundos.

Animation-delay& Animation-iteration-count & Animation-direction

+ info

+ info

+ info

03

Ejercicio

Crea una página web que contenga dos elementos: un cuadro y un círculo. Aplica una animación al cuadro para que cambie de color de rojo a azul y otra animación al círculo para que se mueva de izquierda a derecha. Ambas animaciones deben repetirse infinitamente.

Animaciones

Ejercicio Propuesto

+ info

Ivan Saez

Gracias por ver

Este es un codigo que he puesto en una pagina y quedaría asi:

Animation-delay

¿Tienes una idea?

¡Que fluya la comunicación!

Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras! ¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.

• Genera experiencias con tu contenido.
• Tiene efecto WOW. Muy WOW.
• Logra que tu público recuerde el mensaje.
• Activa y sorprende a tu audiencia.

CODIGO

Así quedaria el codigo.

Animation-iteration-count

Definimos el nombre de una animacion.

Animation-name

Este es un codigo que he puesto en una pagina y quedaría asi:

Animation

Animation-direction