I am trying to draw a circle with border-radius, and animate it. I can do this, but what i can't do is overlay elements and set the circles background to transparent, without unhiding the mask. I am not able to make it transparent over elements because the mask needs to be applied to hide the left half of the circle as it rotates to mimic the draw effect.
HTML
<div class="background"> <div class="wrapper"> <div class="pie spinner"></div> <div class="pie filler"></div> <div class="mask"></div> </div> </div>
CSS
.background{ background:green; z-index: 1000; } .wrapper { width: 250px; height: 250px; position: relative; margin: 40px auto; background: rgba(0,0,255,1); } .wrapper, .wrapper * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .wrapper .pie { width: 50%; height: 100%; transform-origin: 100% 50%; position: absolute; background: transparent; border: 5px solid rgba(0,0,0,0.9); } .wrapper .spinner { border-radius: 100% 0 0 100% / 50% 0 0 50%; z-index: 0; border-right: none; -webkit-animation: rota 5s linear infinite; } .wrapper:hover .spinner, .wrapper:hover .filler, .wrapper:hover .mask { animation-play-state: running; } .wrapper .filler { border-radius: 0 100% 100% 0 / 0 50% 50% 0; left: 50%; opacity: 0; -webkit-animation: opa 5s steps(1, end) infinite reverse; border-left: none; } .wrapper .mask { width: 50%; height: 100%; position: absolute; background: inherit; opacity: 1; -webkit-animation: opa 5s steps(1, end) infinite; } @-webkit-keyframes rota { 0% {transform: rotate(0deg);border-color:red;} 100% {transform: rotate(360deg);z-index:0;} } @-webkit-keyframes opa { 0% {opacity: 1;} 50%, 100% {opacity: 0;} }
http://jsfiddle.net/BuzzSmarter/gmvban4p/
In my example, I need to change the blue background to transparent, without unhiding the border-radius before it starts rotating.
Excuse the colors, these are not what I will be working with, but provide a clearer approach to the issue.
This is my temporary product where I have to remove the draw to accomplish the transparency. http://jsfiddle.net/BuzzSmarter/gmvban4p/
CSS border animation is useful for giving a border image or container element a unique style. To make a website's user interface (UI) more attractive, use a CSS border animation design. CSS border animation is useful for giving a border image or container element a unique style.
To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.
This is my solution.
I set a background on body to show it is transparent
body { background: repeating-linear-gradient(45deg, white 0px, lightblue 100px); height: 500px; background-size: 500px 500px; background-repeat: no-repeat; } html { height: 100%; } #container { position: absolute; width: 400px; height: 400px; border: solid red 1px; animation: colors 4s infinite; } #halfclip { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center; animation: cliprotate 16s steps(2) infinite; -webkit-animation: cliprotate 16s steps(2) infinite; } .halfcircle { box-sizing: border-box; height: 100%; right: 0px; position: absolute; border: solid 25px transparent; border-top-color: blue; border-left-color: blue; border-radius: 50%; } #clipped { width: 200%; animation: rotate 8s linear infinite; -webkit-animation: rotate 8s linear infinite; } #fixed { width: 100%; transform: rotate(135deg); animation: showfixed 16s steps(2) infinite; -webkit-animation: showfixed 16s linear infinite; } @-webkit-keyframes cliprotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @keyframes cliprotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @-webkit-keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);} } @keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);} } @-webkit-keyframes showfixed { 0% {opacity: 0;} 49.9% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} }
<div id="container"> <div id="halfclip"> <div class="halfcircle" id="clipped"> </div> </div> <div class="halfcircle" id="fixed"> </div> </div>
And this is a variation on the solution, to make it run only once on hover
body { background: repeating-linear-gradient(45deg, white 0px, lightblue 100px); height: 500px; background-size: 500px 500px; background-repeat: no-repeat; } html { height: 100%; } #container { position: absolute; width: 300px; height: 300px; border: solid red 1px; } #halfclip { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center; } #container:hover #halfclip { animation: cliprotate 6s 1; transform: rotate(180deg); } @keyframes cliprotate { 0% {transform: rotate(0deg);} 50% {transform: rotate(0deg);} 50.01% {transform: rotate(180deg);} 100% {transform: rotate(180deg);} } .halfcircle { box-sizing: border-box; height: 100%; right: 0px; position: absolute; border: solid 25px transparent; border-top-color: blue; border-left-color: blue; border-radius: 50%; } #clipped { width: 200%; transform: rotate(-45deg); } #container:hover #clipped { transform: rotate(135deg); animation: rotate 3s linear 2; } @keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);} } #fixed { width: 100%; transform: rotate(135deg); opacity: 0; } #container:hover #fixed { opacity: 1; animation: showfixed 6s 1; } @keyframes showfixed { 0% {opacity: 0;} 49.99% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} }
<div id="container"> <div id="halfclip"> <div class="halfcircle" id="clipped"> </div> </div> <div class="halfcircle" id="fixed"> </div> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With