Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation

10 Ejemplos de Animación en CodePen De Los Que Puedes Aprender

by
Length:ShortLanguages:

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

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.