Open In App

Animation using clip-path property in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

The clip-path CSS property is used to clip the region in such a way that element in the clipped regions are shown.

In this article, we will see how we can use the clip-path and @keyframes together to create an image animation.

Step 1: Create a div with a class container that should include <img> tag.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Clip-Path Animation</title>
</head>
 
<body>
    <h2>Welcome to GFG</h2>
 
    <!--div with class container
        contains img tag -->
    <div class="container">
        <img src=
        alt="logo">
    </div>
</body>
 
</html>


Step 2: Including CSS properties –

  1. We will clip the image to polygon initially.
  2. Then, bind an animation to img tag.
  3. The animation is set for three seconds in an infinite loop.
  4. Now, we will specify CSS style inside the @keyframes which will change the clip-path property from one value to another. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Clip-Path Animation</title>
 
    <style>
        .container {
            /* Aligning all container elements
            to center using flex */
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        img {
            width: 600px;
 
            /* Clipping img into polygon shape*/
            clip-path: polygon(50% 0%, 100% 38%,
                    82% 100%, 18% 100%, 0% 38%);
 
            /* Setting animation for 3s in
                an infinite loop */
            animation: clipPath 3s infinite;
        }
 
        /* Creating animation name clipPath */
        @keyframes clipPath {
            0% {
                /* clip-path property initially */
                clip-path: polygon(50% 0%, 100% 38%,
                        82% 100%, 18% 100%, 0% 38%);
            }
 
            50% {
                /* clip-path property at 50% */
                clip-path: polygon(50% 50%, 90% 88%,
                        80% 10%, 20% 10%, 8% 90%);
            }
 
            100% {
                /* clip-path property finally */
                clip-path: polygon(50% 0%, 100% 38%,
                        82% 100%, 18% 100%, 0% 38%);
            }
        }
    </style>
</head>
 
<body>
    <h2>Welcome To GFG</h2>
 
    <!--div with class container
        which contain img tag -->
    <div class="container">
        <img src=
        alt="Travel">
    </div>
</body>
 
</html>


Output:



Last Updated : 09 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads