Arquitectura de Entornos
Web
Unidad 4: Multimedia, transiciones y animaciones
Tema 8: Animaciones, transiciones y transformaciones
Tema 8: Animaciones, transiciones y
transformaciones
Fuente: https://www.ma-no.org/es/diseno-web/css/transiciones-
y-transformaciones-css-guia-basica-con-ejemplos
2
Índice
4.2 Tema 8: Animaciones, transiciones y transformaciones
4.2.1 Animaciones, propiedades
4.2.2 Transiciones, propiedades
4.2.3 Transformaciones, propiedades
3
Capacidades
• Diseña páginas web utilizando etiquetas HTML5, CSS3 y multimedia.
4
Introducción
• En este tema aprenderás a dar animaciones a los elementos de la página web utilizando animaciones,
transiciones y transformaciones.
5
4.2. Animaciones, transiciones y
transformaciones
Fuente: https://www.micursodigital.com/programacion-web-c-
18/tutorial-css3-crear-animaciones-transiciones-tranformaciones-css/687
6
4.2.1. Animaciones, propiedades
Animaciones
• Las animaciones son bastante parecidas
a las transiciones.
• Ambas tienen en común que actúan
sobre los valores de las propiedades de
un elemento transformándolos
gradualmente en otros valores.
Fuente: http://www.rafelsanso.com/animaciones-en-
css3/
7
4.2.1. Animaciones, propiedades
Propiedad Definición
animation-name Nombre de la animación
animation-duration Tiempo que tardará la animación
animation-iteration-count Número de veces que se repite la animación. Por defecto es
1.
animation-direction Orden en el que se ejecutará la animación.
animation-play-state Indica si está corriendo (por defecto) o pausado.
animation-delay Retardo con el que se inicializará la animación.
animation Permite unificar las propiedades anteriores en una sola.
8
4.2.2. Transiciones, propiedades
• Las transiciones es el efecto de un
cambio en el estado de un elemento de
forma gradual, en un intervalo de
tiempo.
• Cuando se habla de cambio de estado se
hace referencia a cambios en los valores
de sus propiedades.
9
4.2.2 Transiciones, propiedades
Propiedad Definición
transition-property Determina las propiedades a ser animadas, el valor por
defecto es all.
transition-duration Tiempo que tardará la transición.
transition-timing-function Especifica la velocidad que se desarrolla la transición. Así se
puede programar la transición para que empiece a una
velocidad, luego frene o acelere.
transition-delay Retardo con el que se inicializará la transición.
transition Permite unificar las propiedades anteriores en una sola.
10
4.2.3. Transformaciones, propiedades
• Las transformaciones es uno de los
elementos más interesantes que se
introducen en CSS3 para convertir el
lenguaje de hojas de estilo en un sistema
capaz de realizar todo tipo de efectos
visuales, incluido 2D y 3D.
11
4.2.3 Transformaciones, propiedades
Propiedad Definición
Rotate Permite rotar un elemento dándole un ángulo de giro en grados.
Skew Desplazamiento de los ejes horizontales.
Scale Permite escalar un elemento, toma valores positivos y negativos y se
le pueden poner decimales.
Translate Permite trasladar un elemento a la vez en el eje de las X y de las Y,
dándole las coordenadas iniciales y finales.
12
Ejercicio
• Diseña una página HTML que permita realizar animaciones,
transiciones y transformaciones sobre los elementos de la
página HTML.
• El diseño de las páginas HTML será bajo el asesoramiento del
docente.
13
Conclusiones
• Las animaciones son bastante parecidas a las transiciones. Ambas tienen en común que actúan sobre los valores
de las propiedades de un elemento transformándolos gradualmente en otros valores.
• Propiedades de las animaciones: animation-name, animation-duration, animation-iteration-count, animation-
direction, animation-play-state, animation-delay, animation.
• Las transiciones es el efecto de un cambio en el estado de un elemento de forma gradual en un intervalo de
tiempo. Cuando se habla de cambio de estado, se hace referencia a cambios en los valores de sus propiedades.
• Propiedades de las transiciones: transition-property, transition-duration, transition-timing-function, transition-
delay, transition.
• Las transformaciones es uno de los elementos más interesantes que se introducen en CSS3 para convertir el
lenguaje de hojas de estilo en un sistema capaz de realizar todo tipo de efectos visuales, incluido 2D y 3D. Las más
usadas son: rotate, scale, translate.
14
Referencias bibliográficas
• Acera García, M. A. (2012). CSS3 (Guía Práctica). Anaya Multimedia.
• Álvarez García, A. (2018). HTML 5.2 (Manual Imprescindible). Anaya Multimedia.
• Gauchat, J. D. (2017). El gran libro de HTML5, CSS3 y JavaScript. 3a ed. Marcombo.
• Universität de Valencia. (UV). (s.f.). Curso de HTML.
https://www.uv.es/jbosch/PDF/Curso%20de%20HTML.pdf
• Baumann, H. (2021). Etiquetas HTML: aprende los primeros pasos para comenzar a desarrollar webs.
https://www.crehana.com/blog/transformacion-digital/etiquetas-html/
• Sanchez Asenjo, J. (s.f.). http://jorgesanchez.net/inicio
15
GRACIAS
SEDE INDEPENDENCIA SEDE BREÑA SEDE TRUJILLO
Av. Carlos Izaguirre 233 Av. Brasil 714 – 792 (CC La Rambla – Piso 3) Calle Borgoño 361
Independencia – Lima Breña – Lima Trujillo
Teléfono: 633-5555 Teléfono: 633-5555 Teléfono: (044) 60-2000
SEDE SAN JUAN DE LURIGANCHO SEDE LIMA CENTRO SEDE BELLAVISTA SEDE AREQUIPA
Av. Próceres de la Independencia 3023-3043 Av. Uruguay 514 Av. Mariscal Oscar R. Benavides 3866 – 4070 Av. Porongoche 500
San Juan de Lurigancho – Lima Cercado – Lima (CC Mall Aventura Plaza) (CC Mall Aventura Plaza)
Teléfono: 633-5555 Teléfono: 419-2900 Bellavista – Callao Paucarpata - Arequipa
Teléfono: 633-5555 Teléfono: (054) 60-3535
www.cibertec.edu.pe
