DEV Community

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.

Tee on October 20, 2019

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 n...
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
Tee

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
 
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
Tee

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
Tee

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 • Edited

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
Tee

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
 
elandalibe profile image
halim • Edited

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 mohamadkhalil.com/

Collapse
 
acupoftee profile image
Tee

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

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
 
alineverc profile image
Aline

These are amazing! 🦄😍

Collapse
 
acupoftee profile image
Tee

Thank you! ❤️🦄

Collapse
 
hunterbecton profile image
Hunter Becton

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

Collapse
 
acupoftee profile image
Tee

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 Becton

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

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
Tee

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
 
jess profile image
Jess Lee

These are so cool!

Collapse
 
acupoftee profile image
Tee

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
 
h4xil10 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
 
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
Tee

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
 
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
 
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
Tee

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
 
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
 
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
 
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
 
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
Tee

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

Collapse
 
yujinyuz profile image
Yujin

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

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
Tee

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

Collapse
 
romainlt profile image
Romain Lt

Really amazing ! Congrats !

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

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

Collapse
 
acupoftee profile image
Tee

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

Collapse
 
eaich profile image
Eddie

Absolutely impressive!

Collapse
 
carolin44054633 profile image
Caroline

Nice article!

Collapse
 
acupoftee profile image
Tee

Thank you!

Collapse
 
hexangel616 profile image
Emilie Gervais

<3

Collapse
 
ahkohd profile image
Victor Aremu

One word, Wow!

Collapse
 
shadowwarior5 profile image
Konstantin Meiklyar

WOW

Collapse
 
gabe profile image
Gabe

These are absolutely incredible

Collapse
 
ben profile image
Ben Halpern • Edited

What an incredible post

Collapse
 
acupoftee profile image
Tee

Thank you so much! And thank you for creating this community and sharing this on your platforms as well! This has been a wonderful community and I'm happy to be apart of it.

Collapse
 
averyd profile image
Avery D

This makes me want to be better

Collapse
 
acupoftee profile image
Tee

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
 
mauro_codes profile image
Mauro Garcia

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

Collapse
 
acupoftee profile image
Tee

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

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
Tee

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
 
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
Tee

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
 
maniflames profile image
Maniflames

Damnn these are so cool 😍

Collapse
 
acupoftee profile image
Tee

Thank you! 😊

Collapse
 
judecodes profile image
Cool

This legit impressed me

Collapse
 
acupoftee profile image
Tee

Thank you so much! I'm happy to hear!

Collapse
 
thatafro profile image
Méhluli Hikwa

If you are also comfortable in After Effects, you can translate your animations to SVG using lottie.js
github.com/airbnb/lottie-web

And there is a community lottiefiles.com/

Collapse
 
acupoftee profile image
Tee

Thanks for sharing! This looks incredible and would love to use this for future projects.

Collapse
 
francoisthibaud profile image
François Thibaud

nice post. native web animation is the best way to start. for my part, I try js libraries like greensock. have you ever experienced this kind of tool ?

Collapse
 
acupoftee profile image
Tee

Thank you! I haven't used it before. I just looked it up and I like how it makes it easier to adjust animation timelines. I'll give it a try!

Collapse
 
negue profile image
negue

woah these are amazing 🎉

Collapse
 
hbenzaoui profile image
Hamza Benzaoui

That is freaking awesome for inspiration, Thank

Collapse
 
lucascumsille profile image
Lucas Cumsille M.

Thank you so much for sharing! This week I want to learn animations both SCSS and Javascript. This is really helpful

Collapse
 
elayarajasubramanian profile image
ElayarajaSubramanian

This is sooo good and inspirational to read. Keep it up buddy..

Collapse
 
_lexedwards profile image
Alex Edwards

Great work! I've always love CSS art! It's always something overlooked by many

Collapse
 
dana94 profile image
Dana Ottaviani

This is awesome! I really want to improve on CSS animations and this post is very inspirational to me. ❤️

Collapse
 
iamluisro profile image
Luis Rodriguez

Thanks for sharing, Tee! These are awesome and you've inspired me to learn more CSS animations.

Collapse
 
vanesa profile image
Vanesa

I loved and enjoyed your post, amazing! (and cute!)

Collapse
 
scrabill profile image
Shannon Crabill

I love these. They make my kawaii, designer heart happy.

Collapse
 
platerocm profile image
Chris Platero

Inspirational article!

I always wonder if some day we can have a (great) software like Ae to export css/svg animations. We need explore this potential on artists.

Collapse
 
kodikos profile image
Jodi Winters

I love the creativity in how you created the scenes with divs. 25 days very well spent. Well done!

Collapse
 
halim profile image
Halim

Wow! These look really cool.

Collapse
 
nguyenquangtin profile image
Tony Tin Nguyen

It's so cool lessons, Tee. Thanks a lot for sharing with us.

Collapse
 
lloydlweendo profile image
Lweendo

Hi Tee! Thank you so much for sharing your experience. I am now ready to begin my path in Css Animations. I think I was waiting for a challenge like this one.

Collapse
 
jayconnerghost profile image
jay martin

Amazing work and very inspiring

Collapse
 
liznix profile image
Liz Nix

Very inspiring work. I'd love to try something like this in 2020. Thank you for posting!

Collapse
 
rosnovsky profile image
Art Rosnovsky

You're an inspiration! What a great post and awesome walk through your process! Thank you so much!!

Collapse
 
nitishr3 profile image
nitishr3 • Edited

That's what we call animations!😍cool

Collapse
 
vishnup95 profile image
vishnu prasad

I don't usually comment here, but wow! Pokemon animations are super cool. Great work!

Collapse
 
echosys profile image
lee dong hyeon

so good , very nice , It made me think again.

Collapse
 
sarahcodes_dev profile image
Sarah 🦄

This is amazing work and so inspiring 🙌🏻

Collapse
 
nirajbadaik profile image
NirajBadaik

I know I am not the first person to say it but you are on another level. If you could do this in 25 days, I can't imagine what you can do in a year. Salute to your work ethics and determination.