Open In App

Explain the concept of Tweening in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

Tweening in CSS basically means animations. It can be seen that the roots of tweening are in computer animation and not exactly in CSS.

In this instance, we instruct the algorithm to find a way to transition between the two keyframes we specify, which are the two possible locations for the objects. In addition to the start and finish keyframes, there may also be intermediate keyframes.

In CSS, keyframes and the animation property overlap. The animation property has the following sub-properties, as follow:

The idea of keyframes is applied in order to view the animation in motion. Typically, two keyframes—from 0%, or the beginning of the animation, to 100%, or the end—are employed. Keyframes in between can also be used.

Example 1: This is the example showing the concept of Tweening in CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .demodiv {
            width: 50vw;
            height: 50vh;
            background-color: green;
            animation-name: demoani;
            animation-duration: 3s;
            animation-delay: 3s;
        }
  
        @keyframes demoani {
            from {
                margin-left: 100%;
            }
            to {
                margin-left: 0%;
            }
        }
    </style>
</head>
  
<body>
    <h1> Understanding CSS ruleset</h1>
    <div class="demodiv">
  
    </div>
</body>
  
</html>


Output:

 

Example 2: Another example where intermediate keyframes are also used.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .demodiv {
            width: 50vw;
            height: 50vh;
            background-color: green;
            animation-name: demoani;
            animation-duration: 3s;
            animation-delay: 3s;
        }
  
        @keyframes demoani {
            0% {
                margin-left: 100%;
            }
            50% {
                margin-left: 50%;
                height: 70vh;
            }
            100% {
                margin-left: 0%;
            }
        }
    </style>
</head>
  
<body>
    <h1> Understanding CSS ruleset</h1>
    <div class="demodiv"></div>
</body>
  
</html>


Output:

 



Last Updated : 06 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads