Connect with us!

Fade In out loading animation HTML and CSS tutorial for beginners.

Salow
February 19, 2023
Animation, CSS

The Fade In/Fade Out behavior lets you dissolve into and out of any object by ramping the opacity of the object from 0 percent to 100 percent at the start, and then back to 0 percent at the end. You can eliminate the fade-in or fade-out effect by setting the duration of the Fade In Time or Fade Out Time to 0 frames.

CSS Properties

Following are the CSS properties used:

Font-size: The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.”/><style media=”print

Font-weight: The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.”/><style media=”print

Fade In out loding Code Block

Here is the code for implementing the Fade In out loading Animation.

.loading {
        font-weight: bold;
        font-size: 30px;
        
      }

Yay! We have created the static Fade In out loading Animation.

Here is the output:

Loading CSS and HTML tutorial

Fade In out loding CSS Animation

fade-in-out animation can be implemented by scaling up and down the shape linearly.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes  fade-in-out {
        to {
          opacity: 0;
        }
      }

The following way is to declare the CSS Class inside the class block.

 .loading {
        font-weight: bold;
        font-size: 30px;
        animation: fade-in-out 1s linear infinite alternate;
      }
      @keyframes fade-in-out {
        to {
          opacity: 0;
        }
      }

Following is the output for Fade In out loading Animation animation.

Fade In out loading Animation HTML CSS GIF

Fade In out loding Video Tutorial

You can find the complete coding tutorial in the following YouTube Short video.

Fade in out loading animation HTML and CSS tutorial 2023 #shorts #coding

Complete Code using HTML and CSS

Copy and paste the complete code in Visual studio code to view the output.


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .loading {
        font-weight: bold;
        font-size: 30px;
        animation: fade-in-out 1s linear infinite alternate;
      }
      @keyframes fade-in-out {
        to {
          opacity: 0;
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Loading... Animation</h1>
    <div class="loading">Loading......</div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Fade In out loading Animation Animation using CSS and HTML. See you in next tutorial!