Requisitos para tomar el curso
Sabes más de animaciones de lo que crees
Animationland game
Creando contadores con CSS en Animationland
Maquetando a nuestros conejitos en Animationland: contexto de apilamiento
Dibujando a nuestros conejitos con CSS en Animationland
Animation y keyframes en CSS
Animation name y keyframe
Animation duration
Animation timing function, iteration count y delay
Animation direction, fill mode y play state
Rendimiento de animaciones con CSS
CSS Triggers: layout, paint y composite
Debugging de animaciones con DevTools
Buenas prácticas para optimizar animaciones web
Libros recomendados y próximos pasos
Continúa en el Curso Práctico de Animaciones con CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Felicidades por haber llegado hasta el final del curso. No sabes lo ansioso que estoy para que pongas en práctica lo aprendido.
Te recomiendo seguir con el curso de Maquetación y Animaciones con CSS.
Sin nada más que decir, me despide y espero verlos en una siguiente articlase.
Y no lo olvides, nunca pares de aprender💚. Contribución creada con los aportes de: Angel David Osorio Leyva.
Aportes 36
Preguntas 2
¿Sabían que existe una librería llamada AOS js o en su acrónimo (Animate on scroll library) ?
.
Esta es una herramienta desarrollada para hacer algunas animaciones en la web al hacer scroll donde tienen diferentes tipos de atributos y características esto seria un gran complemento para nuestro curso.
.
Aquí les dejo el enlace y una pequeña muestra de como funciona.
AOS - Animate on scroll library
👇
Amé este cursooooo :3 Me encanta que es realmente fácil hacer animaciones con CSS, y todo gracias al uso de Keyframes. Simplemente tienes que pensar en qué quieres que el objeto que estás animando haga en cierto punto para después programarlo 😈.
.
Por si a alguien le interesa, tengo este tutorial sobre cómo hacer un loader animado usando CSS, si al día de hoy seguías usando gifs para lograr este efecto, pues ya no más, ahora con CSS es posible 👇 😄
.
https://carlosmperilla.github.io/catland/
Repositorio
**Cambios realizados: **
Me encanto este curso ❤️, los cursos de la maestra Estefany son super creativos, prácticos, con mucha información importante y con retos para aprender más. Les dejo como quedo mi proyecto y recuerden nunca paren de aprender 😃 .
Gracias por este curso y el anterior!!. No sabia que se podían hacer tantas cosas con CSS. Nos vemos en el práctico cuando se libere 😄
Aqui les dejo mi reto, lo hice en Halloween y me inspire en SquideGame!
Code here: https://codepen.io/anna_albirena/pen/WNEEdyX
Gracias profa. Teff, creo que no había puesto esto que hice por allá cuando termine el curso.
Es algo sencillo pero que se me ocurrió mientras hacia el curso, me sirvió para un para hacer unos banners para un contenido que hago. (Se ve menos fluido por ser gif pero la versión original funciona bien)
Les dejo el repo por si gustan darle una vista 😄
https://github.com/onedrako/banner_animations
De nuevo muchas gracias profesora Teff 😄, he aprendido mucho tus cursos en toda la escuela de desarrollo web.
Aquí está mi resultado final, bueno a mi me gusto el curso, fue muy bueno, por los retos, y la aplicacion de conceptos en el proyecto del curso.
Código: https://codepen.io/paolojoaquin/pen/qBrVxOL
Les comparto el juego, muy buen curso
https://codepen.io/carloscdev/pen/YzZJopQ
Este es mi resultado final, excelente curso 🙋🏻♂️
Les comparto mi proyecto realizado en este curso, gracias por los conocimientos compartidos.
⭐️⭐️⭐️⭐️⭐️
Hice mi proyecto con la tematica de minecraft
Me pareció una idea divertida ya que el enderman dentro de minecraft cuando lo intentas tocar se desaparece y teletransporta a otros lugares, tiene esa mística de inalcanzable. Y como el objetivo del juego presentado inicialmente era atrapar conejos, decidí darle una vuelta más y crearme este desafío personal.
Espero les guste! 😋🐭
Para que puedan echarle un ojo al código 👀.
Repo: https://github.com/dillmanncode/minecraft-game
Y para que puedan probarlo 🕹️.
GHPs: https://dillmanncode.github.io/minecraft-game/
MINECRAFT
Aquí esta el mío!
Mi resultado 😄
Quiero aprender mas de Css y animaciones, espero ver mas de sus cursos !!! Excelente todo el aprendizaje que he obtenido con este curso de Platzi, gracias Estefany!!!
Hola a todos, acá les comparto el juego realizado en el curso. Pueden ver el contenido en:
Les comparto como quedo mi proyecto al finalizar el curso.
Repo:
https://github.com/carellanoh/Curso-Animaciones-CSS
Web:
https://carellanoh.github.io/Curso-Animaciones-CSS/
Estoy realizando toda la antigua escuela web y al parecer el practico esta en avanzados, me tomara al menos un mes llegar a el si bien me va…
Yo hice un juego de topos, con ambientación desertica, todavia queda mucho que pulir en el diseño, pero es funcional 😁
Hola compañeros, acá les dejo el resultado final de mi ejercicio:
https://codepen.io/Londrack/full/abJrewx
Además de cambios visuales, incluí más rupias y las “eliminaba” en la medida que eran capturadas y evitar que el score se redujera.
Yo hice cabritas, porque las cabritas son muy cutes XD, también mueven sus orejas solo q me dio pereza hacer el gif :p, buen curso, me divertí bastante.
Esta muy bueno el curso, aprendi muchos sobre animaciones y la enorme diferencia que tiene con transition y fue muy divertido hacer el juego de los conejitos
Hay una librería que sirve para animar proyectos, llamada AOS y también esta otra Animate.css https://animate.style/
Mi resultado
https://diegohrp.github.io/animationCSS/
Aqui mi reto,hize mi mayor esfuerzo
Y listo!!! como diria la profe.
Aca le dejo mi repo de mi proyecto espero le gusta y en 10 minutos se me termina mi acceso a platzi!!! Gracias de todo corazon!
me gustó mucho el curso, está bastante didáctico y fácil de entender:). Me entretuve mucho al igual que en el pasado.
Estuvo fantástico este curso. De los mejores.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?