CSS fill up circle animation - Stack Overflow

admin管理员组

文章数量:1402808

I have a circle which I am trying to animate the fill.

.circle-up {
  width: 210px;
  height: 210px;
  background-color: black;
  border-radius: 100vh !important;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.circle-inner {
  width: 95%;
  height: 95%;
  background-color: #76FA69;
  border-radius: 100vh !important;
  transform: scale(0);
  animation: childFromCenter 1s 1s ease-in forwards;
}

@keyframes childFromCenter {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

<div class="circle-up">
  <div class="circle-inner"></div>
</div>

I have a circle which I am trying to animate the fill.

.circle-up {
  width: 210px;
  height: 210px;
  background-color: black;
  border-radius: 100vh !important;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.circle-inner {
  width: 95%;
  height: 95%;
  background-color: #76FA69;
  border-radius: 100vh !important;
  transform: scale(0);
  animation: childFromCenter 1s 1s ease-in forwards;
}

@keyframes childFromCenter {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

<div class="circle-up">
  <div class="circle-inner"></div>
</div>

This animation works, but I would like the fill to be from the bottom to the top rather than starting at the middle.

https://jsfiddle/97k5bthz/1/

• css

Share Improve this question Follow edited Mar 26 at 23:33 Ori Drori 194k3232 gold badges238238 silver badges229229 bronze badges asked Mar 26 at 23:22 CraigCraig 36.8k3535 gold badges121121 silver badges202202 bronze badges 2

• Don't use a transform, use an animated background gradient. – Paulie_D Commented Mar 26 at 23:33
• Do you have an example? – Craig Commented Mar 26 at 23:35

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

Position the inner circle and move it as required.

.circle-up {
  width: 210px;
  height: 210px;
  background-color: black;
  border-radius: 100vh !important;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.circle-inner {
  position: absolute;
  top: 100%;

  width: 100%;
  height: 100%;
  background-color: #76FA69;
  /*   border-radius: 100vh !important; */
  /*   transform: scale(0); */
  animation: childFromCenter 1s 1s ease-in forwards;
}

@keyframes childFromCenter {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

<div class="circle-up">
  <div class="circle-inner"></div>
</div>

You don't need too much code for this effect. Here is a simple version without keyframes.

.circle-up {
  width: 210px;
  aspect-ratio: 1;
  display: grid;
  background: black;
  border-radius: 50%;
  overflow: hidden;
}
.circle-up:before {
  content: "";
  background: #76FA69;
  transition: 1s 1s linear;
  @starting-style {
    translate: 0 100%;
  }
}

<div class="circle-up"></div>

Another idea:

.circle-up {
  width: 210px;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: 1s 1s linear;
  background: 
    linear-gradient(#000 50%,#76FA69 0) 
    bottom/100% 200%;
  @starting-style {
    background-position: top;
  }
}

<div class="circle-up"></div>

1. You can start with a background size of 0 on the y axis, and animate it to 100%:

* {
  box-sizing: border-box;
}

.circle-up {
  width: 210px;
  aspect-ratio: 1;
  border: 5px solid;
  border-radius: 50%;
  cursor: pointer;
  
  background: black linear-gradient(#76FA69 50%, #76FA69 50%) no-repeat;
  background-position: bottom;
  animation: childFromBottom 1s 1s ease-in both;
}

@keyframes childFromBottom {
  0% {
    background-size: 100% 0;
  }

  100% {
    background-size: 100% 100%;
  }
}

<div class="circle-up"></div>

2. You can animate an insert box shadow using container units, such as cqw:

* {
  box-sizing: border-box;
}

.circle-up {
  width: 210px;
  aspect-ratio: 1;
  border: 5px solid;
  border-radius: 50%;
  cursor: pointer;
  
  background: black;
  box-shadow: inset 0 0 0 0 #76FA69;
  animation: childFromBottom 1s 1s ease-in both;
}

@keyframes childFromBottom {
  to {
    box-shadow: inset 0 -100cqw 0 0 #76FA69;
  }
}

<div class="circle-up"></div>

3. You can set the transform-origin property to bottom:

.circle-up {
  width: 210px;
  aspect-ratio: 1;
  background: black;
  border-radius: 50%;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.circle-inner {
  width: 95%;
  height: 95%;
  background: #76FA69;
  border-radius: inherit;
  transform: scale(0);
  animation: childFromCenter 1s 1s ease-in forwards;
  transform-origin: bottom;
}

@keyframes childFromCenter {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

<div class="circle-up">
  <div class="circle-inner"></div>
</div>

本文标签： CSS fill up circle animationStack Overflow