ANIMACIONES css
CSS y HTML5
Ivan Saez
Índice
Uso
Diferentes etiquetas
Antecedentes
Sobre nosotros
Resultados
Contacto
Objetivos
Metodología
01
Uso
Uso de las animaciones en CSS
Las animaciones en CSS se usan, generalmente, para darle un estílo diferente a una pagina web
Para definir una secuencia de estilos que seguirá una animacion, ponemos @keyframes y el nombre de la animacion.
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.
02
Diferentes etiquetas
Etiquetas básicas
01
05
animation
animation-delay
02
06
animation-name
animation-iteration-count
03
07
animation-duration
animation-direction
04
animation-timing-function
Animation & Animation-name
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-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
+ info
+ info
Animation-duration & Animation-timing-function
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
+ info
Animation-delay& Animation-iteration-count & Animation-direction
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-iteration-count: Se usa para determinar cuantas veces quieres que se repita la animacion, esto puede ser un numero o "infinite"
+ info
+ info
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)
+ info
03
Ejercicio
Ejercicio Propuesto
Animaciones
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.
+ info
Gracias por ver
Ivan Saez
Animation-delay
Este es un codigo que he puesto en una pagina y quedaría asi:
¿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
Animation-iteration-count
Así quedaria el codigo.
Animation-name
Definimos el nombre de una animacion.
Animation
Este es un codigo que he puesto en una pagina y quedaría asi:
Animation-direction
Propuesta Comercial Genial
Ivan Saez
Created on November 20, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Dossier
View
Essential Business Proposal
View
Essential One Pager
View
Akihabara Dossier
View
Akihabara Marketing Proposal
View
Akihabara One Pager
View
Vertical Genial One Pager
Explore all templates
Transcript
ANIMACIONES css
CSS y HTML5
Ivan Saez
Índice
Uso
Diferentes etiquetas
Antecedentes
Sobre nosotros
Resultados
Contacto
Objetivos
Metodología
01
Uso
Uso de las animaciones en CSS
Las animaciones en CSS se usan, generalmente, para darle un estílo diferente a una pagina web
Para definir una secuencia de estilos que seguirá una animacion, ponemos @keyframes y el nombre de la animacion.
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.
02
Diferentes etiquetas
Etiquetas básicas
01
05
animation
animation-delay
02
06
animation-name
animation-iteration-count
03
07
animation-duration
animation-direction
04
animation-timing-function
Animation & Animation-name
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-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
+ info
+ info
Animation-duration & Animation-timing-function
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
+ info
Animation-delay& Animation-iteration-count & Animation-direction
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-iteration-count: Se usa para determinar cuantas veces quieres que se repita la animacion, esto puede ser un numero o "infinite"
+ info
+ info
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)
+ info
03
Ejercicio
Ejercicio Propuesto
Animaciones
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.
+ info
Gracias por ver
Ivan Saez
Animation-delay
Este es un codigo que he puesto en una pagina y quedaría asi:
¿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.
CODIGO
Animation-iteration-count
Así quedaria el codigo.
Animation-name
Definimos el nombre de una animacion.
Animation
Este es un codigo que he puesto en una pagina y quedaría asi:
Animation-direction