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.
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 –
- 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= alt="Travel"> </ div > </ body > </ html > |
Output:
Please Login to comment...