Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)
CodePen es un gran lugar para encontrar inspiración y ver qué locos experimentos UI se les ocurren a otros. Así como esto, también es un lugar útil para encontrar contenido educacional. En este redondeo exploraremos algunos ejemplos interesantes de CodePens que nos enseñan todo sobre animación.
1. Cómo Funcionan Los Fotogramas
Este CodePen ilustra cómo los navegadores leen a través de la secuencia de pasos en una animación de keyframe.
2. Animación CSS Performante para Principiantes
Cuando animamos con CSS tenemos un vasto arreglo de propiedades para animar. Sin embargo, no todas son una buena idea. Animar las propiedades incorrectas pueden ocasionar animaciones lentas y de poca calidad. Este ejemplo de Ian Hazelton explica cómo funcionan las cuatro propiedades más eficientes.
3. Demostración de Animación de Fotogramas
Algunas veces un simple ejemplo es todo lo que necesitas. Este ejemplo muestra cómo puede ser usada la sintaxis from y to en un simple fotograma.
4. Demostración requestAnimationFrame
En esta demostración JavaScirpt de Matt West, mira cómo puede ser usada la API requestAnimationFrame para reproducir y pausar.
5. Cómo usar ChartJS
Un gran uso de comentarios en línea que demuestran cómo crear dos tablas animadas usando ChartJS.
6. Guía de Canvas HTML5 para Principiantes
Una guía agradablemente comentada para usar Canvas, por Petr Tichy.
7. Convertir GIF a Animaciones CSS
Algunas veces no necesitas un GIF generado para tener un elegante efecto de animación. Estos ejemplos de solo-CSS de Joey Cheng son un ejemplo útil de lo que es posible.
8. Ejemplos animateTransform
Chris Coyier demuestra cómo usar SVG's animateTransform.
9. Transformaciones CSS: Ejemplo 3D y TransitionEnd
Es regularmente útil saber cuando una animación ha terminado. Esta demostración simple muestra cómo podemos usar JavaScript para decir cuando una animación termina.
10. Cambiando Fotogramas Clave de Animación en Consultas de Medios
Otra grande para marcar--este ejemplo muestra cómo podemos cambiar animaciones usando media queries. ¡Redimensiona la pantalla para ver el efecto!
Bonus: Rutas de Movimiento CSS
Por último, echemos un vistazo al futuro de la animación SVG con este demo mostrando cómo la propiedad motion-path nos permite crear rutas complejas de movimiento para nuestras animaciones.
¡Terminamos!
Estos son solo un puñado de los demos, blogs y guías disponibles en CodePen. CodePen no solo es grandioso para animaciones; intenta buscar y encontrarás todo tipo de información y demos grandiosos cubriendo todo tipo de temas de desarrollo web. Explora, aprende y diviértete.
Más Recursos de Animación
By
