Connect with us!

Subscribe to my channel Animation using HTML and CSS

Salow
January 9, 2023
Animation, CSS

Subscribe to my channel Animation is most used to make your work recognizable by your audience. In this tutorial we will be using HTML and CSS to achieve it!

CSS Properties

Following are the CSS properties used:

Text-align: The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.
Background-clip: The background-clip CSS property sets whether an element’s background extends underneath its border box, padding box, or content box.
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.
Color: The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.”/><style media=”print
Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
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.
-webkit-background-clip: The background-clip CSS property sets whether an element’s background extends underneath its border box, padding box, or content box.

Subscribe to my channel Code Block

Here is the code for implementing the Subscribe Animation.

.sub-ani {
        font-weight: bold;
        font-size: 60px;
        text-align: center;
        color: #0000;
        background: linear-gradient(
            90deg,
            #fc5e5e calc(50% - 1.6ch),
            white 0 calc(50% + 0.9ch),
            #0000 0
          )
          right/calc(200% + 1ch) 100%;
        -webkit-background-clip: text;
        background-clip: text;
        
      }

Yay! We have created the static Subscribe Animation.

Here is the output:

Salow Studios subscribe animation CSS HTML

Subscribe CSS Animation

reveal 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  reveal {
        to {
          background-position: left;
        }
      }

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

 .sub-ani {
        font-weight: bold;
        font-size: 60px;
        text-align: center;
        color: #0000;
        background: linear-gradient(
            90deg,
            #fc5e5e calc(50% - 1.6ch),
            white 0 calc(50% + 0.9ch),
            #0000 0
          )
          right/calc(200% + 1ch) 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: reveal 3s infinite;
      }
      @keyframes reveal {
        to {
          background-position: left;
        }
      }

Following is the output for Subscribe Animation animation.

Subscribe Animation CSS HTML

Subscribe CSS Video Tutorial

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

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>
      .sub-ani {
        font-weight: bold;
        font-size: 60px;
        text-align: center;
        color: #0000;
        background: linear-gradient(
            90deg,
            #fc5e5e calc(50% - 1.6ch),
            white 0 calc(50% + 0.9ch),
            #0000 0
          )
          right/calc(200% + 1ch) 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: reveal 3s infinite;
      }
      @keyframes reveal {
        to {
          background-position: left;
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Subscribe Animation</h1>
    <div class="sub-ani">
      Subscribe <br />
      Salow Studios
    </div>
  </body>
</html>

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