Article Categories

Selected Reading

How to Import Fade and Scale to HTML?

HTML Web Development Front End Technology

The scale() CSS function specifies a transformation that resizes a 2D element. Since the amount of scaling is defined by a vector, it can resize the vertical and horizontal dimensions at various scales. As a result, it yields a <transform-function> data type. It can be used with the transform property to transform an element in 2D or 3D space.

A two-dimensional vector characterizes this scaling transformation. Its coordinates specify the amount of scaling done in each direction.

A CSS fade transition is a visual effect that occurs when an element on the page, such as an image, text, or background, gradually appears or disappears. To achieve these effects, we can use CSS's transition or animation properties. When using the transition property, we can only specify an initial and final state no intermediate points.

In this article we will discuss the methods to create a simple fade and scale animation in HTML and also look at some examples.

Syntax

Following is the syntax for the scale() function

scale(sx)
scale(sx, sy)

Parameters

sx A number or percentage representing the scaling vector's abscissa (horizontal scaling).
sy A number or percentage representing the scaling vector's ordinate (vertical scaling). If omitted, it defaults to sx.

Following is the syntax for the CSS transition property

transition: property duration timing-function delay|initial|inherit;

Following is the syntax for the CSS transform property

transform: none|transform-functions|initial|inherit;

Using the CSS Animation Property

CSS animations are one of the three methods available for animating content in HTML. CSS animations serve a simple purpose. They give us the ability to animate CSS properties on the elements they affect. This allows us to do cool things like make things move, have things fade in and out, see things change colour, and so on.

The CSS animation property adds animation between styles. This property is a shorthand for the CSS properties listed below

animation-name Specifies the name of the @keyframes rule
animation-duration Defines how long the animation takes
animation-timing-function Specifies the speed curve of the animation
animation-delay Defines when the animation starts
animation-iteration-count Defines how many times the animation runs
animation-direction Defines whether the animation plays forward, backward, or alternating
animation-fill-mode Specifies what styles are applied before/after the animation
animation-play-state Specifies whether the animation is running or paused

Example

In this example we will use CSS animation, defined by two keyframes. One with opacity set to 0 and one with opacity set to 1. Our animation is set to run for 0.3 seconds, and the name of the @keyframes rule that contains the actual animation details is fadeAndScale

<!DOCTYPE html>
<html>
<head>
   <title>Fade and Scale with CSS Animation</title>
   <style>
      body {
         background-color: #F5F5F5;
         font-family: Arial, sans-serif;
         margin: 25px;
      }
      #container {
         margin: 20px;
         width: 400px;
         height: 220px;
         background-color: lightsalmon;
         border-radius: 10px;
      }
      h3 {
         font-size: 70px;
         color: #FFF;
         padding: 20px 10px 10px 90px;
         transform-origin: 50% 100%;
         -webkit-text-stroke: 1px sienna;
         animation-duration: 2s;
         animation-name: fadeAndScale;
         animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
      }
      @keyframes fadeAndScale {
         from {
            opacity: 0;
            transform: scale(.7, .7);
         }
         to {
            opacity: 1;
            transform: scale(1, 1);
         }
      }
   </style>
</head>
<body>
   <div id="container">
      <h3>Hello<br>World</h3>
   </div>
</body>
</html>

The output displays text that fades in while scaling from 70% to 100% size with a subtle bounce effect

Hello
World (appears with fade-in and scale animation on lightsalmon background)

This keyframe's contents formally define our animation, with the opacity set to 0 and the scale function set to 70%. At the end of the animation-duration, our text will be fully visible and its scale is set to 100% in the final state.

Another subtle effect within our animation is a slight bounce at the end where our text grows a little larger than it needs to and then snaps back into place when our text fades and scales in. This is due to the easing function cubic-bezier(.71,.55,.62,1.57).

Using Transition and Transform Properties

The transition property is a shorthand for the following properties

transition-property Specifies the name of the CSS property that will be affected by the transition effect.
transition-duration Specifies how many seconds or milliseconds it takes for the transition effect to complete.
transition-timing-function Specifies the transition effect's speed curve.
transition-delay Defines the time interval after which the transition will begin.

The transform property transforms an element in 2D or 3D space. This property enables us to rotate, scale, move, skew, and so on.

Example

In this example, the body is initially set to opacity 0 on a smaller scale, and the transition and transform properties are later used for animation. The onload event is used to set the opacity to 1 and the scale to (1,1) when the page is loaded

<!DOCTYPE html>
<html>
<head>
   <title>Fade and Scale with Transition</title>
   <style>
      body {
         opacity: 0;
         transition: opacity 3s, transform 3s;
         transform: scale(0.5, 0.5);
         font-family: Arial, sans-serif;
         padding: 20px;
      }
      div {
         background-color: aquamarine;
         width: 200px;
         height: 80px;
         padding: 10px 40px 20px 90px;
         border-radius: 8px;
      }
   </style>
</head>
<body onload="fadeandscale()">
   <div>
      <h2>Hello World!</h2>
   </div>
   <script>
      function fadeandscale() {
         document.getElementsByTagName('body')[0].style.opacity = '1';
         document.getElementsByTagName('body')[0].style.transform = 'scale(1,1)';
      }
   </script>
</body>
</html>

The output shows the entire page content fading in while scaling from 50% to 100% size over 3 seconds

Hello World! (appears on aquamarine background with smooth fade and scale transition)

Because of the transition and transform properties, adjusting the opacity and scale now appears to fade in the page while increasing in size. The transition property allows us to specify the time for the fade in and scale change.

Comparison of Methods

Following table compares the two methods for implementing fade and scale effects

CSS Animation	CSS Transition
Uses `@keyframes` rule to define animation steps	Uses `transition` property for smooth changes
Can define multiple intermediate states	Only defines start and end states
Runs automatically when element loads	Requires a trigger (JavaScript, hover, etc.)
Can loop, reverse, and pause	Runs once per trigger
Better for complex animations	Better for simple state changes
More control over timing and easing	Simpler syntax and implementation

Conclusion

Both CSS animations and transitions can create effective fade and scale effects in HTML. CSS animations offer more control and complexity with keyframes, while transitions provide simpler implementations for basic state changes. Choose animations for automatic, complex effects and transitions for user-triggered, simple transformations.

Eesha Gandhi

Updated on: 2026-03-16T21:38:54+05:30

203 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next