Flying Pig Animation for Codepen Challenge

[TurtleQueenCoding]

I made my first animation outside of the lessons yesterday for the Codepen weekly challenge, which is to animate something that flies. I chose to do a pig because of the saying “when pigs fly.” You can check it out here.

[tioung]

Love it. Well done, way to go!

[USSahand]

Great job, I liked it.

[andresgrdn]

It’s awesome , I’m learning CSS now, where could I learn animations?

[TurtleQueenCoding]

The last two lessons in the RWD curriculum teach you how to build animations. The guides from W3Schools and MDN are also very helpful. But honestly, the best way to learn animation is to create an image (or import one) and just start playing around. Get a basic movement down, and then tweak it until you get the effect you want. Codepen is particularly helpful for this because it lets you see what your animation looks like in the browser. I also like it because you can see other people’s code. For my first animation, I browsed the challenge collection, found a pen I really liked that only used CSS and HTML, looked at the code to figure out how they animated the clouds and the bee, and incorporated those ideas into my own pen. Codepen has weekly challenges based on a monthly theme, and May’s theme was “Get Moving,” so there’s a lot of good stuff in the challenge collections you could learn from.

[seantokuzo]

This is awesome! Very nice!

[andresgrdn]

Thank you for all your help . I’m going to try the RWD curriculum first.