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.
<!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:
