Mind Diary

What We Will Do

We will create 3 boxes and they will fade in one after another:

  1. Create the 3 divs in our HTML file which we want to animate.
  2. Create keyframes in our CSS file (which basically will define how things change).
  3. In our CSS file we create a "fade_in" class to which we assign the rules for the animation property (duration, start delay, etc.) that (i.e. the animation property) is linked to our keyframes.

The HTML Code

<div class="fade_in">
   <span class="fade_in">
      1st<br>look at me fade in
   </span>
</div>
<div class="fade_in">
   <span class="fade_in">
      2nd<br>Oh hi!<br>I can fade in, too !
   </span>
</div>
<div class="fade_in">
   <span class="fade_in">
      3rd<br>Oh hi!<br>I can fade in, three !
   </span>
</div>

The above HTML code makes 3 boxes. The "fade_in" is our animation class that we can add to any other element we want to make it fade in.

Notice that although I think I could not fully understand the "original" tutorial or example, I "modified" it to make the text fade in as well.

You might also like to check my own example !!

The CSS Rules

Here is a "screenshot" of my CSS file:

a screenshot of the CSS file containing the CSS rules for the fade-in animation of HTML elements

How It Works

  • The @keyframes basically define the start state of our box and then the end state. Since we want the box to fade in, we start at opacity: 0; and by the time we are done we end at opacity: 1;.
  • The rules for the fade–in class define what kind of animation we will perform, which is:
    1. Go do @keyframes called "fadeIn", use ease–in animation and only do the animation once.
    2. Then stay at the last keyframe (animation–fill–mode: forwards;) to make sure our boxes do not disappear.
    3. And, finally, do all this in 1s (animation–duration: 1s).
  • At the end we set different delay time for each one of our elements so that they start appearing one after another upon page load.

Further Modifications

How to loop such fade–in animation infinitely (i.e. keep starting over) ?

Add the following code:

animation–iteration–count: infinite;

How to edit the code so that the text fades out after a specified duration and not repeat ?

Add another level into your @keyframes, so that it first starts as hidden, then it would show up and, finally, ends hidden again, like this:

@keyframes fadeIn {
   0% { opacity: 0; }
   50% { opacity: 1; }
   100% { opacity: 0; }
}

Then modify the animation duration value to change how long you want it to be visible.