CODEWITHSUNDEEP
csscss-animationscss-transitions
vlmdgbbgg
vlmdgbbgg

Reputation: 45

Expand circle animation from top left corner of the screen

I'm trying to make an expanding circle animation from top left corner of the screen to the entire screen.

I got it working as expected but from page center:

@keyframes anim {
 0% { clip-path: circle(0% at 50% 50%); }
 100% { clip-path: circle(150%); }
}

#backdrop {
  background-color: #1B1B1B;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  z-index: 10;
  animation-name: anim;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
<div id="backdrop"></div>

Upvotes: 0

Views: 844

Answers (2)

shahin fr
shahin fr

Reputation: 1

.full {
    width: 100vw;
    height: 150px;
    background: red;
    animation-name: anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


@keyframes anim {
    0% {clip-path: circle(0% at 150% 0%);}
    100% {clip-path: circle(150%);}
}

<div class="full"></div>

Upvotes: 0

Dhruvi Makvana
Dhruvi Makvana

Reputation: 905

Please change your keyframes as below. You are starting your circle from 50% 50% which is center of the page.

0% {
clip-path: circle(0% at 0% 0%);
}

Upvotes: 1

Related Questions