CODEWITHSUNDEEP
htmlcsscss-animationsmask
senty
senty

Reputation: 12847

Masking a circle and moving the mask with animation

I have a circular div that is vertically and horizontally centered in div. I am trying to achieve a css animation, that it seems like it's fading in from top to bottom.

I thought of making height 0 initially and moving to 50px, however as it is centered, it starts to getting created from the center. Instead, I want to it to get positioned to the initial position and it gets created from top to bottom. Just like there is a square only masking the circle and nothing else, and it moves to down.

#circle {
   width: 80px;
   height: 80px;
   border-radius: 50px;
}

How can I add this a square mask to achieve the below effect?

Please note that background has a gradient, so I can't put a square and assign it a color directly, thus I thought I need to mask them.

enter image description here

enter image description here

enter image description here

enter image description here

How to achieve this effect?

What I have tried:

@keyframes example {
   from {height: 0}
   to {height: 80px}
}

As the circle is centered, it starts to expand from the middle. This is not what I want. That's why I thought of the mask

Upvotes: 1

Views: 1448

Answers (1)

I haz kode
I haz kode

Reputation: 1625

Edited answer:

I am able to achieve this with a combination of a image background and background-position animation.

This will not work if you set the background as a CSS color like #fff. it needs to be an image or a gradient. You also need to set background-repeat to no-repeat

The animation simply starts with the background out of the div display area then pulls the the background downward into the display area.

Kindly check the examples in full-screen.

Working snippet (jpeg image as object background):

body {
  background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
  margin: 0 auto;
  height: 120vh;
  overflow: hidden;
}

.sun {
  height: 400px;
  width: 400px;
  border-radius: 100vw;
  margin: 5em auto;
  animation-name: sunrise;
  animation-duration: 10s;
  animation-delay: .5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  background: url(https://image.ibb.co/eVdQ3Q/white.jpg);
  background-repeat: no-repeat;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes sunrise {
  from {
  opacity: 1;
    background-position: 0 -700px;
  }
  to {
  opacity: 1;
    background-position: 0 0px;
  }
}
<div class="sun"></div>

Working snippet (gradient as object background):

body {
  background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
  margin: 0 auto;
  height: 120vh;
  overflow: hidden;
}

.sun {
  height: 400px;
  width: 400px;
  border-radius: 100vw;
  margin: 5em auto;
  animation-name: sunrise;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  background: linear-gradient(white,white);
  background-repeat: no-repeat;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes sunrise {
  from {
  opacity: 1;
    background-position: 0 -700px;
  }
  to {
  opacity: 1;
    background-position: 0 0px;
  }
}
<div class="sun"></div>

Upvotes: 3

Related Questions