Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS3 - Animaciones - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 5 de abril de 2021 por Fernando M.

122 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues vamos al último vídeo de esta serie de tutoriales sobre hojas de estilo que va a ser sobre animaciones, ¿vale? Está muy relacionado con los que hemos visto antes de animaciones, de transiciones y de transformaciones, ¿vale? 00:00:00
Yo creo que os va a servir bastante y que os va a dar un plus de modernidad o de efectos curiosos dentro de vuestra página web, ¿vale? 00:00:16
Y de la misma forma también os enseñaré algunos sitios donde podéis sacar más efectos que podéis añadir a vuestras páginas para que queden también curiosos, ¿vale? 00:00:33
Entonces, vamos a partir, igual que hicimos la otra vez, del último archivo que hemos realizado, ¿vale? 00:00:44
Y sobre eso trabajaremos, ¿vale? 00:00:57
Entonces, voy a compartir la pantalla aquí, ¿vale? 00:00:59
Esto es el último que habíamos hecho, que era el archivo de transformaciones. 00:01:03
Entonces, le damos aquí arriba en la esquina izquierda, archivo, después le daríamos a guardar como 00:01:07
y le vamos a poner el nombre, en mi caso va a ser animaciones.html, ¿vale? 00:01:13
Y lo que voy a hacer es borrar todo lo que hay dentro del body, ¿vale? 00:01:20
Y todo lo que hay en la parte de estilos, ¿vale? 00:01:26
Sigue. 00:01:33
Vale. 00:01:35
Ok, entonces le voy a cambiar a esto y donde pone transformaciones voy a poner animaciones. 00:01:37
Eso. 00:01:41
Vale, pues vamos a empezar. Lo primero que vamos a poner es una cabecera de nivel 1 que ponga cómo crear animaciones básicas, ¿vale? 00:01:42
Y debajo vamos a poner un h2 que va a ser que ponga un contenido que sea este texto rebota. 00:01:53
Y debajo vamos a poner un párrafo con contenido Lorem Ipsum, ¿vale? 00:02:02
¿Vale? Ok, pues entonces, nos vamos a venir aquí, y lo primero que vamos a hacer es modificar ese elemento H2, que es en el que le vamos a poner el efecto, ¿vale? 00:02:08
El elemento H2, pues le voy a poner en primer lugar un margen superior, que va a ser de 15 rem, ¿vale? Para que haya mucho margen, porque el objetivo es que rebote arriba y abajo. 00:02:22
Vamos a aumentarle el tamaño de fuente, ¿vale? Va a ser 3rem, ¿vale? 00:02:32
Y ahora vamos a empezar a ponerle efectos, ¿vale? 00:02:42
Entonces, o animaciones, mejor dicho. 00:02:47
En primer lugar le vamos a poner la propiedad AnimationName, ¿vale? 00:02:51
Eso lo que vamos a ir a especificar es el nombre de la animación que nosotros queremos hacer. 00:02:57
En mi caso, la animación, le voy a poner el nombre que yo quiera, ¿vale? 00:03:01
Le voy a poner una animación que va a ser efecto-rebote. 00:03:04
Es muy importante que nos quedemos con este nombre porque luego tenemos que definir esa animación. 00:03:09
Luego vamos a poner animation, la duración del efecto, ¿vale? 00:03:15
En este caso, la duración de la animación va a ser 5 segundos, ¿vale? 00:03:20
Luego vamos a tener, igual que teníamos en las transitions, una propiedad que va a ser animation-timing-function, ¿vale? 00:03:25
Es decir, cómo se va a producir. 00:03:31
Y vamos a poner Easy, ¿vale? Rápido al principio y lento al final. Vamos a poner el número de veces que queremos que se repita, ¿vale? En este caso, pues por Animation Iteration Count, ¿vale? Pues por ejemplo, quiero que se repita tres veces. Si quisiera que se repitiera de forma infinita, pues aquí pondría Infinite, ¿vale? Yo voy a poner ahora mismo tres. Luego lo modifico si quiero, ¿vale? 00:03:33
Y por último, animation direction, ¿vale? Que aquí veis todos los valores que puede tener y esto es, si yo pongo normal, solo lo ejecutaría la animación en un sentido. Si yo pongo alternate, pues iría en un sentido y luego en el otro, un sentido y luego el otro, ¿vale? Pues voy a poner alternate, ¿ok? 00:03:59
Y ahora lo que vamos a hacer es definir el efecto 00:04:18
Entonces nos vamos a poner justo debajo y vamos a poner arroba keyframes 00:04:24
Y ahora ponemos el nombre del efecto que habíamos definido nosotros aquí en animation name 00:04:30
Cojo, lo copio y lo pego 00:04:36
¿Vale? 00:04:39
Y para definir este efecto vais a ver que es muy sencillo 00:04:41
¿Vale? Se hace por porcentaje sobre el tiempo total 00:04:45
Yo pondría 0% y ahora entre llaves pongo los efectos que quiero que ocurra, ¿vale? 00:04:47
Pues, por ejemplo, en 0% quiero que haya una transformación y esa transformación sea una traslación. 00:04:55
En este caso, nosotros en un vídeo anterior hemos utilizado la propiedad translate, 00:05:02
pero si yo quiero solo trasladar en el eje Y, puedo utilizar translate Y, ¿vale? 00:05:06
Pues le doy y quiero trasladarlo 50 píxeles, ¿vale? 00:05:13
¿Ok? Ya está. Ahora, en el 100%, quiero que también se produzca una transformación, que tenga una traslación en el eje Y, y en este caso de menos 200 píxeles, para que vuelva hacia abajo. 00:05:17
¿Vale? 00:05:37
¿Ok? 00:05:39
Vale, entonces fijaros, si yo ahora me vengo a mi página y la cargo, fijaros que el texto está subiendo hacia arriba, sube, baja, rápido al principio y lento al final, vuelve a subir, ¿vale? 00:05:43
Esto lo está haciendo y fijaros que lo ha hecho solo tres veces, ¿vale? 00:06:01
Una por cada vez. 00:06:05
Si yo quisiera que lo hiciera de forma infinita, donde aquí he puesto 3, pondría infinito, ¿vale? 00:06:05
Fijaros que al poner infinito, la animación se está corriendo todas las veces, sin parar, ¿vale? 00:06:12
Fijaros, nosotros podemos, por ejemplo, añadir un efecto que ocurra en el 50%, ¿vale? 00:06:20
Pues en el 50% quiero que, por ejemplo, el color cambie, ¿vale? 00:06:26
Es decir, que cambie a negro. 00:06:33
¿Vale? Porque en el 100%, aparte de añadir la propiedad transform, pues voy a añadir una propiedad que sea que me cambie el color, ¿vale? 00:06:37
Y que me lo cambie a un rojo, ¿vale? Fijaros, me lo pasa a rojo y vuelve a negro. 00:06:48
Y recordad que yo puedo concatenar propiedades de transformación, ¿vale? Por ejemplo, voy a aumentar el tamaño en el eje Y, ¿vale? 00:06:54
Que sea 1,5 veces más grande. Pues fijaros como cuando sube arriba aumenta en el eje Y, ¿vale? Y cambia el color y luego baja, ¿vale? Pues así haríamos efectos, ¿vale? Animaciones, para ser más concretos, ¿vale? 00:07:01
Y ahora os voy a explicar cómo crear un spinner, ¿vale? Un spinner es un elemento, el típico elemento que se pone en una web para hacer, por ejemplo, que, ¿qué os digo yo? Pues que ocurra, que aparezca como un símbolo de carga de la página, ¿vale? 00:07:25
O una cajita que da vuelta, en este caso vamos a hacer una cajita que da vuelta o algo así, ¿vale? Entonces nos venimos aquí abajo y vamos a poner un elemento div vacío con un id que va a ser elemento, ¿vale? 00:07:53
Y ahora nos venimos aquí y vamos a modificar los estilos de ese elemento, ¿vale? Entonces nos ponemos, vamos a poner aquí un comentario, cómo crear un spinner básico, ¿vale? 00:08:06
Bueno, y perdón, antes de explicar esto, os voy a explicar una cosa muy importante que tenemos que añadir siempre para los efectos que hemos visto, tanto ahora de animaciones, como los que vimos de transiciones, como los que vimos de transformaciones, ¿vale? 00:08:23
Y básicamente lo que es que nos vamos a ir a la aula virtual, ¿vale? Y en la parte de hojas de estilo, ¿vale? Aquí habréis visto que en la parte de abajo os he puesto un enlace a una página que pone Autoprefixer CSS, ¿vale? 00:08:38
Entonces, si vais aquí, en esta página, lo que vais a hacer es que en la columna de la izquierda vais a copiar todos los efectos que añadáis, ¿vale? Por ejemplo, yo voy a añadir mi H2, pues lo copio y lo pego, ¿vale? Voy a dejarlo un poquito aquí alineado para que se vea bien, ¿vale? Tal que así, ¿ok? 00:08:56
Pues fijaros, él automáticamente me ha añadido otras propiedades que se utilizan para que haya compatibilidad con todos los navegadores, ¿vale? 00:09:29
Pues entonces, fijaros que el margin-top y el font-size no me lo han modificado, simplemente me han modificado los otros. 00:09:41
Pues entonces lo que vamos a hacer es copiar todo esto, lo copiamos y en mi elemento h2 lo sustituimos, ¿vale? 00:09:48
Tal que así, ¿vale? Y eso lo tenemos que hacer, como digo, para todos los elementos que hemos visto, tanto de transición como de transformación, como ahora de animación, ¿vale? 00:09:55
Si os dais cuenta, básicamente lo que hace es replicarlo, pero esto es importante hacerlo porque asegura la compatibilidad con otros navegadores, ¿vale? 00:10:13
Entonces, no se os puede olvidar esto, ¿vale? Ya digo que el enlace lo tenéis en el aula virtual. 00:10:22
¿Vale? Y lo mismo haríamos con esto, pues copiaríamos este keyframe, ¿vale? Lo pegamos aquí, como lo veis, y simplemente nos venimos aquí y esto copiamos y pegamos, tal que así, ¿vale? 00:10:29
Y bueno, ya esto lo tabularíamos para que quedara bien, ¿vale? Fijaros que aparece dos veces. Vale, pues a lo que íbamos, al elemento spinner. Pues nos venimos, ¿vale? Voy a venir aquí para que se vea. 00:10:49
Y vamos a crearnos mi ID elemento, ¿vale? Y dentro de ese elemento le vamos a poner una anchura de 200 píxeles, una altura también de 200 píxeles, va a ser un cuadrado, un borde de 5 píxeles doble y le vamos a poner un color que va a ser como una especie de naranja. 00:11:12
Le vamos a poner un margen de 0 por arriba, auto para que esté centrado y de 90 píxeles por abajo, ¿vale? 00:11:36
Y vamos a poner, en lugar de utilizar ahora las propiedades que habíamos visto aquí, 00:11:48
de animation name, animation duration, animation timing function y así, etc., 00:11:57
vamos a poner una única propiedad que va a ser animation, ¿vale? 00:12:03
En mi caso, la animación la voy a llamar miSpinner, ¿vale? MiSpinner va a tener dos segundos de duración, un segundo de delay, va a ser easy out, es decir, lento al principio y rápido al final, va a durar de forma infinita y va a ir en un lado y en el otro, ¿vale? 00:12:06
Pero cuando vaya en el otro lado va a ir de forma reversa, ¿vale? Ok. Alternate, reverse. Vale. Y ahora modificamos ese elemento spinner, ¿vale? 00:12:31
Entonces ponemos keyframes y pongo mi spinner, ¿vale? Y ahora voy a poner en el 0%, voy a poner que, por ejemplo, me haga una transformación y me rote 0 grados, ¿vale? Para que vuelva a su posición original. 00:12:47
Ahora, en el 30% vamos a ponerle que haga una transformación y es que rote en el eje X 180 grados. 00:13:07
Y aparte, le vamos a poner un borde que sea de un píxel sólido, ¿vale? 00:13:20
Fijaros que ya vais viendo cómo va cambiando, ¿vale? Cómo van en esos efectos añadiendose progresivamente. 00:13:30
Y queda bastante guay. 00:13:37
Ahora vamos a ponerle otro efecto, otra animación al 80%. 00:13:38
En este caso vamos a ponerle una transformación que rote en el eje Y. 00:13:45
Otro 180 grados. 00:13:52
¿Vale? 00:13:54
Fijaros. 00:13:58
Y por último, en el 100% le vamos a poner una transformación que rote en el eje Z 360º, ¿vale? Y que aparte modifique su color de fondo, background color, y me ponga como color el mismo que yo había definido en el borde, ¿vale? 00:13:58
Y para que no quede, le voy a poner el mismo color en el borde, este de aquí, y así queda más curioso, ¿vale? 00:14:31
Y aquí tenéis ese efecto, el efecto que os decía, ¿vale? 00:14:47
Ok, pues una vez que tenemos este spinner creado, pues hacemos como hemos hecho antes. 00:14:52
Nos copiamos todo, tanto el keyframes como el elemento, nos vamos al autoprefixer y lo pegamos, ¿vale? 00:14:57
Y ahora, pues nos copiamos todo esto, uy, no lo copiamos y lo pegamos aquí, ¿vale? Perfecto. Vale, y por último vamos a ver cómo hacer una animación, lo que sea una animación múltiple, ¿vale? 00:15:06
Para eso, es decir, cómo poner varias animaciones, ¿vale? 00:15:33
Porque aquí estamos poniendo una sola, que se llama miSpinner y hace lo que sea, ¿vale? 00:15:40
En este caso, la vamos a poner justo antes del spinner que habíamos definido. 00:15:45
Vamos a poner un elemento div con un id que va a ser animación múltiple, ¿vale? 00:15:49
Y nos venimos aquí a mis estilos. 00:15:57
Y lo que vamos a hacer es poner mi ID a animación múltiple, ¿vale? En primer lugar le vamos a poner un color de fondo, bueno voy a poner aquí la página para que lo podáis ver al mismo tiempo, que va a ser FFD700, ¿vale? 00:16:00
Que si os dais cuenta es una especie de amarillo. Vamos a ponerle también una anchura de 300 píxeles, una altura también de 300 píxeles. 00:16:20
Le vamos a poner un borde redondeado del 50%, ¿vale? Para que quede como un círculo. 00:16:36
Le vamos a poner un margen inferior de 300 píxeles, ¿vale? 00:16:47
Y ahora, fijaros que vamos a poner varios efectos, ¿vale? 00:16:54
Voy a poner animation y voy a poner, en primer lugar, una animación, ¿vale? Que va a ser un cambio de color, ¿vale? Ese cambio de color va a durar 3 segundos, se va a hacer en el estilo, en el timing function easy y se va a hacer de forma infinita, ¿vale? 00:17:00
Y vais cambiando de un estilo a otro. Luego pongo coma, voy a mover ese elemento, ¿vale? Pongo mover elemento, va a durar dos segundos, va a ser rápido al final y lento al principio, por lo tanto, easy out, y va a ser de forma infinita también, y que se vaya y vuelva, ¿vale? 00:17:21
Por eso pongo Alternate Reverse, ¿vale? Y ahora aquí debajo, pues modifico esos keyframes. En primer lugar, voy a modificar el cambio de color, ¿vale? Que al 0% y al 100%, ¿vale? Fijaros que al poner coma, acepto los dos, igual que hacíamos con los estilos normales, ¿vale? Pues va a cambiar el color y va a tener un color, pues el original, ¿vale? 00:17:44
Que va a ser FF de 700, este amarillito. Y en el 83% o el 86% vamos a hacerle un cambio de color a un verde, ¿vale? 00:18:12
Background color A00800, ¿vale? Fijaros que ya se está produciendo ese cambio de color en el círculo. 00:18:26
Y ahora modificamos el keyframe que es moverElement, ¿vale? 00:18:38
Y en este caso, pues, lo que vamos a hacer, vamos a poner solo lo que ocurre al 0%, ¿vale? 00:18:47
Y básicamente lo que voy a hacer es un transform que va a producir una traslación en el eje X, ¿vale? 00:18:57
De 900 píxeles, ¿vale? 00:19:04
Y aquí veis como juntamos dos efectos diferentes, ¿vale? Pues lo mismo que hacíamos antes, copiamos todo esto, nos venimos al auto-prefixer, lo borramos todo y pegamos. 00:19:11
Y el resultado que nos produce esto lo copiamos y lo pegamos, ¿vale? Y aquí tenéis las animaciones que hemos incluido en esta página utilizando únicamente hojas de texto, ¿vale? 00:19:26
¿Vale? Bueno, pues espero que con esto tengáis recursos de sobra para vuestra página, ¿vale? Y para cualquier duda, pues tenéis el foro o a mí en clase, ¿vale? Un saludo, chicos y chicas. 00:19:46
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
122
Fecha:
5 de abril de 2021 - 17:24
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
20′ 02″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
86.92 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid