One of the things that I had always wanted to do with projects’ I’ve worked on during my ongoing journey as an aspiring software developer was to make my website’s UI a lot more appealing & less boring to look at.

This isn’t to say that the color schemes & design specifications I had to abide by weren’t perfect for this. Instead, it is to make it…well….more appealing. Or at least to be quite frank…not static.

It created a nagging thought in mind every time I worked on a project. Browsing through the beautiful designs on Dribbble for an hour every day didn’t help either (or so I thought). Eventually, I came across one of the coolest CSS properties I believed solved this for me (all thanks to one of my previous projects!): the CSS Animation.

This article will be a step-by-step tutorial guide on using the CSS Animation property to create an animation. The animation will be of a ball bouncing infinitely in a confined space when dropped from above. Before we ‘bounce’ into it, you may need to have at least a beginner to advanced beginner level of understanding of HTML5 and CSS3. Like I’ve said, I found this CSS property to be useful for some of my project’s UI & you’d probably find it useful too! Let’s get right into it!

(NOTE: You will need a text editor for this whether it’s Visual Studio Code or Atom etc.)

Step 1: Create your folder with the following files & folder in it.

Open your text editor and create your folder as seen below:

Fig. 1.0_ Create the folder for this tutorial._

I’ve created a folder called ‘animations-article-tutorial’. Within it, I have created:

1. an index.html file

2. a styles folder that has:

• a CSS-Resets.css file
• a style.css file

Step 2: Paste & save the CSS Resets code from Eric Meyer’s CSS Resets file into the CSS-Resets.css file.

This is to reset/remove any default CSS stylings of any web browser you’d use to view your work.

If you need to read more about this, visit Eric Meyer’s website where he explains more about this.

Step 3: Copy & paste the code below into your index.html file and your style.css file

Fig. 1.1_ Create the files for the web page._

#html #css #web-development #software-development #css-animation #front-end-development #learning