loading...
Cover image for 25 Days of CSS Animations: Teaching Myself CSS through Motion Design.

25 Days of CSS Animations: Teaching Myself CSS through Motion Design.

acupoftee profile image Elisabeth Diang 🌻 Updated on ・8 min read

25 Days of CSS Animations

25 Days of CSS Highlights

It was the first day of 2019 and I was not where I wanted to be. I felt at my peak when learning something new. The new year started with a project idea, and the winter ended with an unmotivated, unfinished project.

I missed the college coding grind--learning new things and bringing ideas to life. A skill I've always wanted to master was CSS. I want to leverage it and create compelling user experiences for people to enjoy. My background in Python, Java, and C++ gave me a solid computer science foundation. Now it was time to modernize my skills and make my work functional and visually appealing.

25 Days of CSS: Eevee petting app

One day I opened CodePen, felt waves of inspiration, and got right to work. I studied HTML and CSS using the MDN Web Docs, W3Schools and CSS Tricks.

Around this time I was also teaching myself vector drawing and animation using Adobe Illustrator and After Effects (until my free trial ran out...). When I found this pure CSS BB-8 animation on CodePen, I was captivated. I had to learn how to do that.

And so it began.

let's get started

I challenged myself to spend 20 days coding CSS animations before the end of the year. The final day was when I got the most ambitious, and the most creative, so I spent a total of 25 days!

You can view my 25 Days of CSS journey on CodePen.


Tools

The Bare Minimum

Everyone starts small. For the first 10 days of the challenge, I used the following to brush up on the basics. These served as the foundation for my frontend skills:

  • HTML: Hypertext Markup Language; creates the content of a webpage.
  • CSS: Cascading Style Sheets; describes the style of a webpage.
  • Javascript: A programming language used to describe a webpage's behavior. This was used for select animations. 

  • CodePen: An online code editor for HTML, CSS, and Javascript where users can showcase their work - great for getting your web dev code seen and debugged.

Power Ups

Everyone also gets lazy and curious (by everyone I mean me). Once I was comfortable with the bare minimum, I explored tools that would improve the development process:

  • Sass: Style sheet language that provides variables, functions, mixins, and more to streamline CSS.
  • Pug: A template engine for a more clean, whitespace sensitive syntax for HTML--great for speeding up development.
  • Visual Studio Code: A cross platform source-code editor. Used to practice setting up my Pug and Sass developer environment.

The Process

I wanted to take time and care to learn and understand CSS properties and its uses. Breaking down my creative process in this way enabled me to make something fun and learn something new.

1. Have an Idea

I'd browse Dribble, CodePen, and r/MotionDesign for inspiration. 

I can be overly ambitious when learning something new, so finding inspiration on these sites helped me scope my animations while realizing CSS's capabilities.

Animation Inspiration from CodePen and Dribbble

My collection of inspiration from CodePen and Dribbble

Then I wrote down every possible idea I had with no limits. Most of my ideas came from things I enjoy like video games, sci-fi, kawaii culture, the list goes on…This would help me persevere through challenges and motivate me to keep working on it.

Animation Ideas

Brainstorm Bomb 🤯

2. Sketch a Blueprint

I'd start off with a rough sketch of the animation. This is where I planned my HTML elements, and the animation directions for specific elements.

Animation Blueprint for Coder

Sketch for Day 10

3. Find Examples

The beauty of coding is that you can learn from existing implementations and repurpose them for your own. 

Why reinvent the wheel? Improve it with new ideas. 

I inspected animation code that seemed similar to what I was trying to accomplish, and combined it with what I learned to form an elegant solution. CodePen and the Chrome developer tools were a big help here.

4. Animate!

Equipped with ideas, blueprints, examples, and my Bulbasaur plushie, I brought my CSS ideas to life. I've had roadblocks, I've been personally victimized by typos, and I wasn't always happy with my pace. Thankfully, online research and rubber ducking helped me learn from my mistakes and progress faster and faster after each project.

Days 1–8: Start Small & Recreate Examples with a Twist

The first 9 days focused on understanding shaping, positioning, keyframes, and transitions. I grabbed designs, animations, and pens I really liked, and tried to recreate them from memory.

25 Days of CSS: Hello CSS (A twist on Marjo Sobrecaray's Hello Pen)

25 Days of CSS: Pokéball, Go! A recreation of a Dribbble by Mark Usmiani

25 Days of CSS: Egg Head in Love - An animated version of a Dribble shot by MBE

25 Days of CSS: Eggstraterrestrial - a twist on Marjo Sobrecary's pen Glowing Meteor

25 Days of CSS: Sun Blocked - a recreation of Gal Shir's Dribbble animation

25 Days of CSS: Beauty and the Beast's Enchanted Rose - a twist on Marjo Sobrecaray's Enchanted Rose Pen

Intermission

Part way through my challenge I felt insecure. I wondered whether or not there was any merit or value to learning CSS this way.

Am I wasting my time? Is this even useful for web development?

Well, let's find out.

I put my new skills to the test by designing and coding the frontend for a make up e-commerce site using plain old HTML and CSS:

Shimmer and Shine website

Shimmer and Shine: Make Up E-commerce Site.

Here I used the traditional column layout with the clearfix method, studied the tradeoffs between traditional columns, flex boxes, and CSS grids after using flex boxes in my animations, applied media queries, and debugged elements through Chrome's developer tools.

Then, I worked on a fun redesign of MAC Makeup's landing page inspired by Julie Park's FitBit landing page. I applied my knowledge of CSS positioning, transitions, borders, box shadows, render orders, fonts, and clips.

MAC Makeup Landing Page

MAC Makeup Landing Page

Animating armed me with the ins and outs of numerous CSS properties like backgrounds, transforms, borders, positions, the list goes on. Animating reinforced newly acquired skills, and thus exercised them by building static web pages. 

Whether you're a frontend developer, CSS animator or hobbyist, we're all using the same language -- the skills and concepts learned are transferrable by default.

Liquid error: internal

Days 9–25: Climb the Curve & Code from the Heart

My later projects were based on original ideas once I got more comfortable with CSS. I've always wanted to make an animated avatar, and cute animations inspired by my everyday life. Some of my work was also inspired by my favorite Nintendo video games like Super Mario World 2: Yoshi's Island and Pokémon.

25 Days of CSS: Interactive Self Portrait

Day 10 is one of my personal favorites. I made this once I realized how much I love coding. Before this challenge I've had several low points, wallowed in doubt, and grew skeptical of my path as I felt my skills and projects weren’t as competitive and impactful as my peers yet.

Thankfully I remembered why I'm doing this--to learn and to create engaging experiences. With that in mind I pursued this challenge with hard work, determination, and self improvement, and in turn it restored my love for coding.

25 Days of CSS: Coder.

Day 12 was spent styling my first full stack project for my coding bootcamp which was a single paged Tic Tac Toe game. Since our whole cohort was assigned the same game, I gave my version an animated personality:

25 Days of CSS: Tic Tac Toe

I resumed my personal animations for days 13 - 25:

25 Days of CSS: Super! (My reaction to passing my first bootcamp project \o/)

25 Days of CSS: Under Kamek's Spell - I loved the spell trail effect in Yoshi's Island and felt like recreating it 🌈✨

This one is another favorite. Days 17-18 was inspired by this gorgeous scene from my favorite Pokémon episode Bulbasaur and the Mysterious Garden.

25 Days of CSS: Pokemon Friends. Bulbasaur and Pikachu go great together like CSS and animations.

This last pen was an interesting one to work on. I revisited Pokémon X for the Nintendo 3DS and opened up Pokemon Amie. This feature lets players pet and feed their their Pokemon using the 3DS touch screen. It's fun and therapeutic on a rough day, so I was compelled to code a desktop version for myself and others to use.

25 Days of CSS: Pokemon Amie ❤️ Hover over Eevee and hold left click to pet it.

I'm grateful for this journey. I learned key CSS concepts like keyframes, transitions, transformations, blend modes, clipping, masking, media queries, pseudo elements, flex boxes, and much, much more.

Additionally, I grew more confident in my coding and problem solving abilities. I've picked myself back up by completing projects from start to finish, managing my scope, asking questions, and maintaining a growth mindset.

I'm encouraged by this challenge. I'm excited to learn more and tackle more frontend projects in the future.

Discussion

pic
Editor guide
Collapse
kurisutofu profile image
kurisutofu

To get inspiration, this one may be of interest to you:
uimovement.com/all-designs/

I like the ideas there and since it's only for inspiration and not actually coded (I believe), a few could be a good challenge.

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you for sharing! I just book marked this. I'm excited to visit this site for UI inspiration!

Collapse
kurisutofu profile image
kurisutofu

You can even receive the top 5 designs of the week in your inbox ;)

Collapse
elandalibe profile image
halim

Oh my god , I proud of you. I hope i have the same way that help me to learn New skills .
I will try the same steps to learn CSS motion.

My new Arabic project " ask and answer community jwabe.com

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you for the kind words! Best of luck with your CSS journey as well!

Collapse
nanouchkaya profile image
Claudine

Thanks for this article! I love CSS and all that creative part. Always wanted to try a full css animation like those you've shown here. Your challenge motivates me to start one 💪

Awesome realizations 😍👏

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you so much! Good luck and have fun with your challenge! 💪🔥

Collapse
gracesnow profile image
Grace Snow

Brilliant and inspirational article!

How did you have all the time for this? I'm guessing you didn't have a full time job at the time? And did you do all 25 days in a row, or was this like a weekly project?

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thanks so much!

Since there wasn't room in my schedule to spend 25 consecutive days on this, I allotted time on days where I was free to work on this. That way I still worked on this for 25 days.

Collapse
axelledrouge profile image
AxelleDRouge

oooohhh how beautiful and inspiring! I want to be able to create such fantastic animations! But my problem is more the difficulty to stay focused. Before starting a new project (there I quickly find myself in the "flow" as gamers would say) I get distracted easily, and more than a little scared. There are sooo many interesting things to learn and create, I never really know where to start

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you! Haha I totally hear you. I can be the same way. What I found helpful is tailoring work to what you're passionate about, in your case it could be gaming! That way you're motivated to problem solve and find resources to help you with your next project. Working on something gaming related motivates me too :D

Collapse
axelledrouge profile image
AxelleDRouge

Yeah you're right. of course I could reply that maybe I am a bit too much passionate :D In fact that's probably my biggest problem, finding time to do everything I want ;) like I'm involved in a lot of local groups in my town, mostly in ecology. I have many ideas for that and so little time

Collapse
owlypixel profile image
Owlypixel

I personally think that this is one of the best ways to learn new things - build fun and interesting for you projects. You can devote a small project like these to one thing or a concept and finish it in a couple of evenings or so.
Then, when you gain more skills in this area, you can combine them into something much more substantial.
The most fun part here is that there are no rules! You can do anything you want. You can let your imagination roam free and just code whatever you like, however you like.
Nobody is going to stand behind your shoulder and complain about missing requirements or strict deadlines.
Thanks for sharing this.

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Well said. This is exactly how I felt while pursuing this, and it really paid off. Since finishing my challenge I noticed that I’ve been much more mindful about my CSS usage since this helped me understand properties at a deeper level. Now I work as a frontend engineer and and I’ve been able to pick up my companies code axe and conventions very easily. I’m also helping rewrite our CSS documentation too. Passion projects really do pay off.

Collapse
srsandy profile image
Sandeep「 Flame 」

Love your work and efforts.
I also go to codepen and find awesome css motions that I want to code myself.
But I'm never able to I try.
I always get stuck with random numbers and how to decide what angle will or what degree will be correct.
Any tips how can I also learn what you learned in 25days.

Collapse
hunterbecton profile image
Hunter Garrett

Any good animation tutorials? Everything I find is basic animations, but all these examples feel so intimidating. 😅

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

That's a good question. Most of what I learned about animation was from reading MDN's Keyframes post and W3Schools' articles on keyframes and the animation article.

Before viewing these I used W3Schools and MDN to learn how to shape elements and position them in different ways since each shape is an HTML element! CodePen was also phenomenal for seeing it put into practice.

I did however just come across an illustration and animation by Agathe Cocco after my challenge. It's a great read and a great place to get started!

Best of luck! I hope this helped answer your questions.

Collapse
hunterbecton profile image
Hunter Garrett

Thanks for taking the time to put an answer together, and congrats on this blowing up! I've seen it everywhere. 😊

Collapse
alineverc profile image
Aline

These are amazing! 🦄😍

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you! ❤️🦄

Collapse
cbrennanpoole profile image
C Brennan Poole

This is both, the most ingenious, and down right neatest blog post of Twenty '19.

Thanks for inspiring and reminding us.

Oh my fur and whiskers!

I'm late, I'm late, I'm late!

Off to code-learning, head scratching, and browser tab accumulating.

Care to co11aborate?

We promise not to flatulate.


It is likely though--Yeah? Unfortunately so; We will definitely exacerbate.


No time to say goodbye, hello I'm late!

> I'm late!

> I'm late!

😁
(Practicing MD cause we suck at this whole structure thing 😪)

Collapse
jess profile image
Jess Lee (she/her)

These are so cool!

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you so much!

Thank you for creating such a great platform. This has been a good one to be apart of and share what I've learned.

Collapse
kp profile image
KP

@acupoftee these are amazing! 3 questions:

  1. How do you get started (beyond the MDN docs - I like to see progress visually)?
  2. I've been using this animation for my site: codepen.io/lindell/pen/pePwzM but the code is VERY resource intensive and slows down my computer a LOT after staying on the page for 5-10 mins. Any idea on how to make this performant / lighter would be great!
  3. Lastly, any thoughts on greensock?
Collapse
tiagombp profile image
Tiago Maranhao

This was very inspiring, thank you! Loved the "Intermission", I could totally relate with the reflection you made there. I feel a bit more encouraged after reading your article. Your work is beautiful, and I really really liked the sketch for Day 10 (I liked it even more after seeing the result! 🤩). I hope you post more sketches! :)

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you so much! I'm happy to read that the intermission was relatable. I tend to forget that everyone goes through this from time to time. Since everyone doubts themselves from time to time it felt right to share my solution for overcoming those feelings. Thank you again for reading and for sharing your thoughts! 😄

Collapse
matscodes profile image
Mats

This article is very inspirational. The results look awesome and I appreciate how openly you mention the doubt you had during your learning process. From an outside perspective it seems like your time was very well spent :)

Collapse
anechol profile image
Ashley E

I cannot describe how amazing this is. I've been wanting to level up my CSS skills but never felt confident enough to do this much animation. Maybe this can give me some motivation. Thanks for sharing!

Collapse
nothinbutblood profile image
Sriram

Hi Tee I'm impressed by your css skills my name is sriram Im a fullstack javascript developer from india I have a whatsapp group dedicated to coders so if you wanna join please feel free to ping me +918970787208

Collapse
rose profile image
Rose

You already know that I think your work is fantastic! Great post 🙂 You definitely have a talent for this stuff, have you spent much time in the past doing any design work or just art in general?

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you! 😊I really enjoyed your recent post as well.

Back in high school I used to draw and paint a little for fun. I didn't do it as much during college, nor did I do design work before hand. I started studying UI/UX principles and best practices on my spare time and looked to Dribbble and Behance for inspiration. I'm looking forward to doing more UI work in the future.

Collapse
ut4utc profile image
ut4utc

Great job Tee.

But I don't understand how you learned all these CSS concepts like keyframes, transitions, transformations, blend modes, clipping, masking, media queries, pseudo-elements, flex boxes?

What book you can recommend exploring these issues in CSS?

Collapse
michaeljamie profile image
Michael Johnston

Awesome work! I'm blown away how much you learned in such a short amount of time. Keep up the great work!

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you! Will do! It's amazing how much depth there is to CSS. Learning more of its ins and outs will be exciting.

Collapse
mzahraei profile image
Ardalan

Great job that was useful.
I have a questions and I wanted to know with which app you created
Sketch for Day 10 I mean photo?

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you!

I took a picture of a notebook sketch with my iPhone. Then in the default editor I increased the brilliance, shadows, contrast, brightness, and black point, and decreased the highlights.

Collapse
waqarhusain profile image
Waqar Hussain

Outstanding work, never saw anything like that before 😱

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you! CSS animations are incredible. Definitely would recommend CodePen if you're interested in seeing more of them. It's a great platform for inspiration.

Collapse
saurabhdaware profile image
Saurabh Daware 🌻

woahh!!! these are sooo good 😭🌻🦄🦄

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Haha thank you! 😄It's a fun medium for sure

Collapse
eddieaich profile image
Eddie Aich

Absolutely impressive!

Collapse
maurogarcia_19 profile image
Mauro Garcia

I just want to say that your work is insanely good.
Keep doing it! 😄

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you so much! I definitely look forward to working on more of them 😄

Collapse
denn1sb profile image
Dennis B

WOW you're amazing! My mind is blown with some of these. You have inspired me to really dig into css animations now, thank you Tee!

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you so much! It's my pleasure. Good luck, have fun, and I look forward to seeing what you make!

Collapse
carolin44054633 profile image
Caroline

Nice article!

Collapse
acupoftee profile image
Collapse
romainlt profile image
Romain Lt

Really amazing ! Congrats !

Collapse
yujinyuz profile image
Yujin

Wish I had more motivation and creativity like you do! Great article btw. I enjoyed reading it ☺️

Collapse
ajayadav09 profile image
ajayadav09

This is incredibly awesome and some of them are so detailed. The amount of time it must have taken to get all the in-sync animation easing right is crazy. Amazing work.

Collapse
acupoftee profile image
Elisabeth Diang 🌻 Author

Thank you! It was definitely quite the process to sync everything. It's feels great when it all comes together nicely.

Collapse
ahkohd profile image
Victor Aremu

One word, Wow!