Animation using clip-path property in CSS - GeeksforGeeks

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.
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png"        alt="logo">    </div></body>  </html>
Step 2: Including CSS properties –
We will clip the image to polygon initially.Then, bind an animation to img tag.The animation is set for three seconds in an infinite loop.Now, we will specify CSS style inside the @keyframes which will change the clip-path property from one value to another. 
We will clip the image to polygon initially.
Then, bind an animation to img tag.
The animation is set for three seconds in an infinite loop.
Now, we will specify CSS style inside the @keyframes which will change the clip-path property from one value to another. 
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png"        alt="Travel">    </div></body>  </html>
Output:
CSS-Misc
HTML-Misc
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript