Related Articles

Related Articles

Animation using clip-path property in CSS
  • Last Updated : 24 Aug, 2020

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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. 
filter_none

edit
close

play_arrow

link
brightness_4
code

<!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;
  
            /* Cliping 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>

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :