仅在一个圆圈中为一个线性渐变颜色停止设置动画

Question

I am creating some circles where a certain portion of the circle is filled by a color by using a linear gradient. I am curious if it's possible to just animate one of the color stops in the circle. For example, if a circle is filled by the color red from 0 30% and the rest 30% 100% is filled by gray, is it possible to just create an animation effect on the 0 30% part that is filled with red. Since this is sort of like a progress bar, was hoping that it could appear as though the circle is being filled in by the color. Here is the code:

 .page-wrapper { max-width: 800px; display:flex; flex-directon:row; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #fff; color: #001A5F; }.circle-wrapper { max-width: 200px; margin:40px; display:flex; flex-direction: column; align-items:center; }.circle { width: 150px; height: 150px; margin-left: 0; border: 4px solid #a0c884; border-radius: 100%; text-align: center; color: #001A5F; background-color: #a0c884; /*text-shadow: 0px 0px 30px rgba(119, 119, 119, 0.7); */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; }.circle-text { font-size: 45px; /*letter-spacing: 4px; */ font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; margin: 0; width: 100%; }.circle-text2 { color: #fff; font-size:100px; } h3 { margin-top: 10px; margin-bottom: 10px; font-size:25px; } p { margin: 0; } /* For illustration, no effect on click */.example { background: linear-gradient(to top, #253715 0% 50%, #426e1f 50% 100%); }.example2 { background: linear-gradient(to top, #ce2029 0% 30%, #ececec 30% 100%); }.example3 { background: linear-gradient(to top, purple 0% 90%, #fff 90% 100%); }.circle-border { border: 4px solid #e14048; }.circle-border2 { border: 4px solid #e14048; }.circle-border2 { border: 4px solid #cd00cd; }

 <div class="page-wrapper"> <div class="circle-wrapper"> <div class="circle filled example" data-fill="64"> <p style="color:#fff" class="circle-text">50%</p> </div> <h3>Class of 1960 </h3> <p> Raised: $500 </p> </p> Goal: $1000 </p> </div> <div class="circle-wrapper"> <div class="circle circle-border filled example2" data-fill="64"> <p class="circle-text">30%</p> </div> <h3>Class of 1965 </h3> <p> Raised: $300 </p> </p> Goal: $1000 </p> </div> <div class="circle-wrapper"> <div class="circle circle-border2 filled example3" data-fill="64"> <p class="circle-text">90%</p> </div> <h3>HCC </h3> <p> Raised: $900 </p> </p> Goal: $1000 </p> </div> </div>

Answer 1

You can use an @keyframes animation and break down the percentage by dividing the percentage by the number of steps you want to get the increment value to use in the @keyframes rule.

So in your example of 30% , you would create an animation for the CSS class .example which is 30% . I chose to use percentages in increments of 5 , so 100 divided by 5 gives me 20 steps. Now we divide 30 by 20 and this gives us 1.5 . This is the amount we want to step up each 5% increment in the @keyframes rule .

We begin adding the animation and giving it a name for the keyframes. In the example I use fill , I add a duration, .7 seconds and add an ease-in-out . animation: fill 0.7s ease-in-out;

Then we also add the last keyframes styling so when the animation stops it shows the intended outcome, filled by 30% .

.example {
  animation: fill 0.7s ease-in-out;
  background: linear-gradient(to top, #ce2029 0% 30%, #ececec 30% 100%);
}

Then we create the @keyframes rule... @keyframes fill with the animation name we used in the elements class, .example . Here we increment the linear-gradient by 1.5% each step...

  0% {
    background: linear-gradient(to top, #ce2029 0% 0%, #ececec 0% 100%);
  }
  5% {
    background: linear-gradient(to top, #ce2029 0% 1.5%, #ececec 1.5% 100%);
  }
  10% {
    background: linear-gradient(to top, #ce2029 0% 3%, #ececec 3% 100%);
  }
  /* stepping up by 5% in the @keyframes rule and adding 1.5% to both gradient
     settings each time until we reach 100% keyframe => 30% gradient fill */

 .circle-wrapper { max-width: 200px; margin: 40px; display: flex; flex-direction: column; align-items: center; }.circle { width: 150px; height: 150px; margin-left: 0; border: 4px solid #a0c884; border-radius: 100%; text-align: center; color: #001A5F; background-color: #a0c884; /*text-shadow: 0px 0px 30px rgba(119, 119, 119, 0.7); */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; }.circle-text { font-size: 45px; /*letter-spacing: 4px; */ font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; margin: 0; width: 100%; } h3 { margin-top: 10px; margin-bottom: 10px; font-size: 25px; } p { margin: 0; } /* For illustration, no effect on click */.example { animation: fill 0.7s ease-in-out; background: linear-gradient(to top, #ce2029 0% 30%, #ececec 30% 100%); } @keyframes fill { 0% { background: linear-gradient(to top, #ce2029 0% 0%, #ececec 0% 100%); } 5% { background: linear-gradient(to top, #ce2029 0% 1.5%, #ececec 1.5% 100%); } 10% { background: linear-gradient(to top, #ce2029 0% 3%, #ececec 3% 100%); } 15% { background: linear-gradient(to top, #ce2029 0% 4.5%, #ececec 4.5% 100%); } 20% { background: linear-gradient(to top, #ce2029 0% 6%, #ececec 6% 100%); } 25% { background: linear-gradient(to top, #ce2029 0% 7.5%, #ececec 7.5% 100%); } 30% { background: linear-gradient(to top, #ce2029 0% 9%, #ececec 9% 100%); } 35% { background: linear-gradient(to top, #ce2029 0% 10.5%, #ececec 10.5% 100%); } 40% { background: linear-gradient(to top, #ce2029 0% 12%, #ececec 12% 100%); } 45% { background: linear-gradient(to top, #ce2029 0% 13.5%, #ececec 13.5% 100%); } 50% { background: linear-gradient(to top, #ce2029 0% 15%, #ececec 15% 100%); } 55% { background: linear-gradient(to top, #ce2029 0% 16.5%, #ececec 16.5% 100%); } 60% { background: linear-gradient(to top, #ce2029 0% 18%, #ececec 18% 100%); } 65% { background: linear-gradient(to top, #ce2029 0% 19.5%, #ececec 19.5% 100%); } 70% { background: linear-gradient(to top, #ce2029 0% 21%, #ececec 21% 100%); } 75% { background: linear-gradient(to top, #ce2029 0% 22.5%, #ececec 22.5% 100%); } 80% { background: linear-gradient(to top, #ce2029 0% 24%, #ececec 24% 100%); } 85% { background: linear-gradient(to top, #ce2029 0% 25.5%, #ececec 25.5% 100%); } 90% { background: linear-gradient(to top, #ce2029 0% 27%, #ececec 27% 100%); } 95%{ background: linear-gradient(to top, #ce2029 0% 28.5%, #ececec 28.5% 100%); } 100% { background: linear-gradient(to top, #ce2029 0% 30%, #ececec 30% 100%); } }.circle-border { border: 4px solid #e14048; }

 <div class="page-wrapper"> <div class="circle-wrapper"> <div class="circle circle-border filled example" data-fill="64"> <p class="circle-text">30%</p> </div> <h3>Class of 1965 </h3> <p> Raised: $300 </p> <p> Goal: $1000 </p> </div> </div>

Answer 2

Use multiple background and you can easily do it by animating background-size

 .page-wrapper { max-width: 800px; display: flex; } * { box-sizing: border-box; } body { background: #fff; color: #001A5F; }.circle-wrapper { max-width: 200px; margin: 40px; display: flex; flex-direction: column; align-items: center; }.circle { width: 150px; height: 150px; border: 4px solid #a0c884; border-radius: 100%; color: #001A5F; background-color: #a0c884; display: flex; align-items: center; justify-content: center; animation:up 3s linear; }.circle-text { font-size: 45px; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; margin: 0; }.circle-text2 { color: #fff; font-size: 100px; } h3 { margin-top: 10px; margin-bottom: 10px; font-size: 25px; } p { margin: 0; } /* For illustration, no effect on click */.example { background: linear-gradient(#253715 0 0) bottom/100% 50% no-repeat #426e1f; }.example2 { background: linear-gradient(#ce2029 0 0) bottom/100% 30% no-repeat #ececec; }.example3 { background: linear-gradient(purple 0 0) bottom/100% 90% no-repeat #ececec; }.circle-border { border: 4px solid #e14048; }.circle-border2 { border: 4px solid #e14048; }.circle-border2 { border: 4px solid #cd00cd; } @keyframes up { from { background-size:100% 0%; } }

 <div class="page-wrapper"> <div class="circle-wrapper"> <div class="circle filled example" data-fill="64"> <p style="color:#fff" class="circle-text">50%</p> </div> <h3>Class of 1960 </h3> <p> Raised: $500 </p> <p> Goal: $1000 </p> </div> <div class="circle-wrapper"> <div class="circle circle-border filled example2" data-fill="64"> <p class="circle-text">30%</p> </div> <h3>Class of 1965 </h3> <p> Raised: $300 </p> <p> Goal: $1000 </p> </div> <div class="circle-wrapper"> <div class="circle circle-border2 filled example3" data-fill="64"> <p class="circle-text">90%</p> </div> <h3>HCC </h3> <p> Raised: $900 </p> <p> Goal: $1000 </p> </div> </div>