<img src="https://hacks.mozilla.org/files/2017/06/firefox-logo.png" height="200" class="circle">
.circle {
animation: 2s infinite alternate circle;
}
@keyframes circle {
from {
-webkit-clip-path: circle(0%);
clip-path: circle(0%);
}
to {
-webkit-clip-path: circle(120px);
clip-path: circle(120px);
}
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 90vh;
box-sizing: border-box;
}
body > * {
display: block;
flex: 0 0 auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.