Animation using clip-path property in CSS
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= 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.
<!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> |
Output:
.png)
