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: