Animation using clip-path property in CSS Last Updated : 24 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like 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= "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. 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= "https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png" alt="Travel"> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article Animation using clip-path property in CSS N NANDINIJAIN Follow Improve Article Tags : Web Technologies CSS CSS-Misc HTML-Misc Similar Reads CSS animation-name Property The animation-name property in CSS is used for defining animations. It is used to specify the name of the @keyframes that describe the animation.Understanding the Animation-Name PropertyThe animation-name property in CSS is used to connect an element to a set of keyframes. The keyframes describe the 2 min read CSS animation-play-state Property The animation-play-state property in CSS controls animation playback: paused stops, running starts, initial resets to default, and inherit inherits from its parent element.Syntaxanimation-play-state: paused|running|initial|inherit;Property ValueThe animation-play-state property is listed below:Value 3 min read CSS animation-timing-function Property The animation-timing-function property in CSS is used to specify how an animation makes transitions through keyframes. It defines the speed curve of the animation, determining how the intermediate keyframes are calculated and the pacing of the animation. Syntax: animation-timing-function: linear | e 4 min read CSS clip-path Property The clip-path property of CSS is used to clip the particular section of the image such that part of the image inside the section is shown and part of the image outside the section is not shown. and the CSS clip-path property allows you to create custom clipping paths to define the visible portion of 3 min read CSS animation-duration Property The animation-duration property in CSS is essential for controlling the length of time an animation takes to complete one cycle, making it a vital tool for creating dynamic and engaging web designs.Syntax:animation-duration: time | initial | inherit;Property Value:time: This value is used to specify 3 min read Like