loading...

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

Tee Diang 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... [Read Full]
markdown guide
 

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.

 

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

 

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

 

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

 

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

 

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 😍👏

 

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

 

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

 

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

 

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

 

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?

 

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.

 
 

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

 

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.

 

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

 

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.

 

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.

 

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?

 

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 :)

 

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.

 

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!

 
 

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.

 

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?

 

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.

 

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! :)

 

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! 😄

 

@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?
 

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 😪)

 

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

 

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

 
 

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/

 

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

 

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!

 

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

 
 
 
 

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.

 
 
 
 

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?

 

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.

 
 

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

 
 
 

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 ?

 

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!

 

Outstanding work, never saw anything like that before 😱

 

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.

 
 

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

 

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

 

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

 

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.

 

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

 
 

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

 
 

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

 

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

 
 
 

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

 

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

 
 

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

 

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

 

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

 
 

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.

 

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.

 

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

 

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

 

This is amazing work and so inspiring 🙌🏻

 

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

code of conduct - report abuse