CodeNewbie Community 🌱

Cover image for #100DaysofCode Chapter 4 ~ CSS Animation
Lanre Fagbeyiro
Lanre Fagbeyiro

Posted on

#100DaysofCode Chapter 4 ~ CSS Animation


The descriptions below are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Animation.


Animation is a method in which figures are manipulated to appear as moving images. It is the capturing of sequential, static images, drawings, or photos of inanimate objects and playing them in rapid succession to mimic real-world motion.

What is CSS Animation?

CSS Animation makes it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
CSS Animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

I have completed 40 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this fourth chapter.


The majority of my coding for this chapter was for two main projects.

CSS Typing Animation


For this project, I created a background image and I centered a text on the image using the flexbox properties. I animated the text to make it type on its own and the text cursor blink infinitely. You can check out this project on CodePen and GitHub.

CSS liquid Fill


For this project, I created a box at the center of the page using the flexbox properties. I used the before pseudo-elements which contained the apple logo image and the after pseudo-elements which I animated to create the liquid fill on the box. As you might expect, you can also find this project on CodePen and GitHub.

Recommended Resources

freeCodeCamp’s CSS Animation

CSS Tricks — Animation

CSS Tricks — CSS Animation Libraries

MDN’s CSS Animation

w3schools CSS Animation

The Net Ninja — CSS Animation Tutorial

What’s Next?

My plans for the next chapter are:

• Working on CSS Illustration and building projects on them.

• Continue learning JavaScript.


I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju

Top comments (1)

damion_towne profile image
Damion Towne

Wealth management is a type of financial planning that helps people make the best decisions for their long-term financial security. If you are looking for best wealth management then you should contact this wealth management gosford company. It's not just about investing and saving money; wealth management focuses on making sure you have enough income to live comfortably, as well as preparing for possible emergencies or unexpected expenses.