pure CSS drawing circle animation
2
I wrote a pure css drawing circle animation, but there's a little white space between the two half circles during the animation. (When the animation ends, they gone.)
Can anyone please tell me why does this happened?
My HTML:
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 0;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>My complete code goes here. Thank you.
html css animation path circle
edited Nov 16 '18 at 6:58
Nandita Sharma
9,9782719
asked Nov 16 '18 at 6:44
NicoleNicole
114
add a comment |
2
I wrote a pure css drawing circle animation, but there's a little white space between the two half circles during the animation. (When the animation ends, they gone.)
Can anyone please tell me why does this happened?
My HTML:
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 0;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>My complete code goes here. Thank you.
html css animation path circle
edited Nov 16 '18 at 6:58
Nandita Sharma
9,9782719
asked Nov 16 '18 at 6:44
NicoleNicole
114
add a comment |
2
2
2
I wrote a pure css drawing circle animation, but there's a little white space between the two half circles during the animation. (When the animation ends, they gone.)
Can anyone please tell me why does this happened?
My HTML:
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 0;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>My complete code goes here. Thank you.
html css animation path circle
edited Nov 16 '18 at 6:58
Nandita Sharma
9,9782719
asked Nov 16 '18 at 6:44
NicoleNicole
114
I wrote a pure css drawing circle animation, but there's a little white space between the two half circles during the animation. (When the animation ends, they gone.)
Can anyone please tell me why does this happened?
My HTML:
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 0;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>My complete code goes here. Thank you.
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 0;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 0;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>html css animation path circle
html css animation path circle
edited Nov 16 '18 at 6:58
Nandita Sharma
9,9782719
asked Nov 16 '18 at 6:44
NicoleNicole
114
edited Nov 16 '18 at 6:58
Nandita Sharma
9,9782719
asked Nov 16 '18 at 6:44
NicoleNicole
114
edited Nov 16 '18 at 6:58
Nandita Sharma
9,9782719
edited Nov 16 '18 at 6:58
Nandita Sharma
9,9782719
edited Nov 16 '18 at 6:58
Nandita Sharma
9,9782719
9,9782719
asked Nov 16 '18 at 6:44
NicoleNicole
114
asked Nov 16 '18 at 6:44
NicoleNicole
114
asked Nov 16 '18 at 6:44
NicoleNicole
114
114
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Here it is, please check. It was because of you gave .circle-left and .circle-right left:0; and right:0; respectively, change it to left:1px; and right:1px; and you're done...
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>answered Nov 16 '18 at 7:06
ElusiveCoderElusiveCoder
1,4111420
Okay, but why the two half circles couldn't be cloes together if I didn't set theleft: 1pxandright: 1px? Why they can' t fit in the wrapper? And when I comment out the animations, there're something on the 0deg and 180deg.
– Nicole
Nov 16 '18 at 7:45
This is basically a rendering issue. You can only have hacks for it. Have fun...
– ElusiveCoder
Nov 16 '18 at 7:47
After I set theleft: 1pxandright: 1pxwhen I zoom in, like 150% or bigger, the white space show up again...
– Nicole
Nov 16 '18 at 8:21
Why you zoom in but?
– ElusiveCoder
Nov 16 '18 at 8:26
This is a project made for the clients. They might do the same as well.
– Nicole
Nov 16 '18 at 8:41
|
show 1 more comment
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53332736%2fpure-css-drawing-circle-animation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Here it is, please check. It was because of you gave .circle-left and .circle-right left:0; and right:0; respectively, change it to left:1px; and right:1px; and you're done...
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>answered Nov 16 '18 at 7:06
ElusiveCoderElusiveCoder
1,4111420
Okay, but why the two half circles couldn't be cloes together if I didn't set theleft: 1pxandright: 1px? Why they can' t fit in the wrapper? And when I comment out the animations, there're something on the 0deg and 180deg.
– Nicole
Nov 16 '18 at 7:45
This is basically a rendering issue. You can only have hacks for it. Have fun...
– ElusiveCoder
Nov 16 '18 at 7:47
After I set theleft: 1pxandright: 1pxwhen I zoom in, like 150% or bigger, the white space show up again...
– Nicole
Nov 16 '18 at 8:21
Why you zoom in but?
– ElusiveCoder
Nov 16 '18 at 8:26
This is a project made for the clients. They might do the same as well.
– Nicole
Nov 16 '18 at 8:41
|
show 1 more comment
0
Here it is, please check. It was because of you gave .circle-left and .circle-right left:0; and right:0; respectively, change it to left:1px; and right:1px; and you're done...
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>answered Nov 16 '18 at 7:06
ElusiveCoderElusiveCoder
1,4111420
Okay, but why the two half circles couldn't be cloes together if I didn't set theleft: 1pxandright: 1px? Why they can' t fit in the wrapper? And when I comment out the animations, there're something on the 0deg and 180deg.
– Nicole
Nov 16 '18 at 7:45
This is basically a rendering issue. You can only have hacks for it. Have fun...
– ElusiveCoder
Nov 16 '18 at 7:47
After I set theleft: 1pxandright: 1pxwhen I zoom in, like 150% or bigger, the white space show up again...
– Nicole
Nov 16 '18 at 8:21
Why you zoom in but?
– ElusiveCoder
Nov 16 '18 at 8:26
This is a project made for the clients. They might do the same as well.
– Nicole
Nov 16 '18 at 8:41
|
show 1 more comment
0
0
0
Here it is, please check. It was because of you gave .circle-left and .circle-right left:0; and right:0; respectively, change it to left:1px; and right:1px; and you're done...
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>answered Nov 16 '18 at 7:06
ElusiveCoderElusiveCoder
1,4111420
Here it is, please check. It was because of you gave .circle-left and .circle-right left:0; and right:0; respectively, change it to left:1px; and right:1px; and you're done...
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>answered Nov 16 '18 at 7:06
ElusiveCoderElusiveCoder
1,4111420
answered Nov 16 '18 at 7:06
ElusiveCoderElusiveCoder
1,4111420
answered Nov 16 '18 at 7:06
ElusiveCoderElusiveCoder
1,4111420
answered Nov 16 '18 at 7:06
ElusiveCoderElusiveCoder
1,4111420
1,4111420
Okay, but why the two half circles couldn't be cloes together if I didn't set theleft: 1pxandright: 1px? Why they can' t fit in the wrapper? And when I comment out the animations, there're something on the 0deg and 180deg.
– Nicole
Nov 16 '18 at 7:45
This is basically a rendering issue. You can only have hacks for it. Have fun...
– ElusiveCoder
Nov 16 '18 at 7:47
After I set theleft: 1pxandright: 1pxwhen I zoom in, like 150% or bigger, the white space show up again...
– Nicole
Nov 16 '18 at 8:21
Why you zoom in but?
– ElusiveCoder
Nov 16 '18 at 8:26
This is a project made for the clients. They might do the same as well.
– Nicole
Nov 16 '18 at 8:41
|
show 1 more comment
Okay, but why the two half circles couldn't be cloes together if I didn't set theleft: 1pxandright: 1px? Why they can' t fit in the wrapper? And when I comment out the animations, there're something on the 0deg and 180deg.
– Nicole
Nov 16 '18 at 7:45
This is basically a rendering issue. You can only have hacks for it. Have fun...
– ElusiveCoder
Nov 16 '18 at 7:47
After I set theleft: 1pxandright: 1pxwhen I zoom in, like 150% or bigger, the white space show up again...
– Nicole
Nov 16 '18 at 8:21
Why you zoom in but?
– ElusiveCoder
Nov 16 '18 at 8:26
This is a project made for the clients. They might do the same as well.
– Nicole
Nov 16 '18 at 8:41
Okay, but why the two half circles couldn't be cloes together if I didn't set the
left: 1px and right: 1px ? Why they can' t fit in the wrapper? And when I comment out the animations, there're something on the 0deg and 180deg.– Nicole
Nov 16 '18 at 7:45
Okay, but why the two half circles couldn't be cloes together if I didn't set the
left: 1px and right: 1px ? Why they can' t fit in the wrapper? And when I comment out the animations, there're something on the 0deg and 180deg.– Nicole
Nov 16 '18 at 7:45
This is basically a rendering issue. You can only have hacks for it. Have fun...
– ElusiveCoder
Nov 16 '18 at 7:47
This is basically a rendering issue. You can only have hacks for it. Have fun...
– ElusiveCoder
Nov 16 '18 at 7:47
After I set the
left: 1px and right: 1px when I zoom in, like 150% or bigger, the white space show up again...– Nicole
Nov 16 '18 at 8:21
After I set the
left: 1px and right: 1px when I zoom in, like 150% or bigger, the white space show up again...– Nicole
Nov 16 '18 at 8:21
Why you zoom in but?
– ElusiveCoder
Nov 16 '18 at 8:26
Why you zoom in but?
– ElusiveCoder
Nov 16 '18 at 8:26
This is a project made for the clients. They might do the same as well.
– Nicole
Nov 16 '18 at 8:41
This is a project made for the clients. They might do the same as well.
– Nicole
Nov 16 '18 at 8:41
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53332736%2fpure-css-drawing-circle-animation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
