<!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
class="container">
<
img
src=
alt="Travel">
</
div
>
</
body
>
</
html
>