CSS animation circle-triangle-square
up vote
1
down vote
favorite
I'm toying around with CSS animations for fun. My limited experience is getting in the way.
The script below transforms a circle to triangle to an square and reverses. The animation between circle and triangle however has a slight bug. I expect it has something to do with the border but I can't seem to fix it. (I have no background in programming..:))
Could someone give me a push in the right direction?
.triangle {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
animation-name: testframe;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes testframe {
/*circle*/
0% {
width: 100px;
height: 100px;
background-color: #6980fe;
border-radius: 50%;
}
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
/*square*/
100% {
width: 100px;
height: 100px;
background-color: #6980fe;
}
}
css
asked Nov 9 at 12:54
Sumerechny
263
add a comment |
up vote
1
down vote
favorite
I'm toying around with CSS animations for fun. My limited experience is getting in the way.
The script below transforms a circle to triangle to an square and reverses. The animation between circle and triangle however has a slight bug. I expect it has something to do with the border but I can't seem to fix it. (I have no background in programming..:))
Could someone give me a push in the right direction?
.triangle {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
animation-name: testframe;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes testframe {
/*circle*/
0% {
width: 100px;
height: 100px;
background-color: #6980fe;
border-radius: 50%;
}
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
/*square*/
100% {
width: 100px;
height: 100px;
background-color: #6980fe;
}
}
css
asked Nov 9 at 12:54
Sumerechny
263
If one of the answers below fixes your issue, you should accept it (click the check mark next to the appropriate answer). That does two things. It lets everyone know your issue has been resolved to your satisfaction, and it gives the person that helps you credit for the assist. See here for a full explanation.
– Andrew Bone
Nov 9 at 14:00
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I'm toying around with CSS animations for fun. My limited experience is getting in the way.
The script below transforms a circle to triangle to an square and reverses. The animation between circle and triangle however has a slight bug. I expect it has something to do with the border but I can't seem to fix it. (I have no background in programming..:))
Could someone give me a push in the right direction?
.triangle {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
animation-name: testframe;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes testframe {
/*circle*/
0% {
width: 100px;
height: 100px;
background-color: #6980fe;
border-radius: 50%;
}
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
/*square*/
100% {
width: 100px;
height: 100px;
background-color: #6980fe;
}
}
css
asked Nov 9 at 12:54
Sumerechny
263
I'm toying around with CSS animations for fun. My limited experience is getting in the way.
The script below transforms a circle to triangle to an square and reverses. The animation between circle and triangle however has a slight bug. I expect it has something to do with the border but I can't seem to fix it. (I have no background in programming..:))
Could someone give me a push in the right direction?
.triangle {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
animation-name: testframe;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes testframe {
/*circle*/
0% {
width: 100px;
height: 100px;
background-color: #6980fe;
border-radius: 50%;
}
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
/*square*/
100% {
width: 100px;
height: 100px;
background-color: #6980fe;
}
}
css
css
asked Nov 9 at 12:54
Sumerechny
263
asked Nov 9 at 12:54
Sumerechny
263
edited Nov 9 at 13:02
asked Nov 9 at 12:54
Sumerechny
263
asked Nov 9 at 12:54
Sumerechny
263
asked Nov 9 at 12:54
Sumerechny
263
263
If one of the answers below fixes your issue, you should accept it (click the check mark next to the appropriate answer). That does two things. It lets everyone know your issue has been resolved to your satisfaction, and it gives the person that helps you credit for the assist. See here for a full explanation.
– Andrew Bone
Nov 9 at 14:00
add a comment |
If one of the answers below fixes your issue, you should accept it (click the check mark next to the appropriate answer). That does two things. It lets everyone know your issue has been resolved to your satisfaction, and it gives the person that helps you credit for the assist. See here for a full explanation.
– Andrew Bone
Nov 9 at 14:00
If one of the answers below fixes your issue, you should accept it (click the check mark next to the appropriate answer). That does two things. It lets everyone know your issue has been resolved to your satisfaction, and it gives the person that helps you credit for the assist. See here for a full explanation.
– Andrew Bone
Nov 9 at 14:00
If one of the answers below fixes your issue, you should accept it (click the check mark next to the appropriate answer). That does two things. It lets everyone know your issue has been resolved to your satisfaction, and it gives the person that helps you credit for the assist. See here for a full explanation.
– Andrew Bone
Nov 9 at 14:00
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
for to fix this slight bug, you shoud to include this property in triangle animation:
"border-radius: 0;"
like this:
...
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-radius: 0;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
...
I hope help you.
answered Nov 9 at 13:38
MarcusVinnicius
1163
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
for to fix this slight bug, you shoud to include this property in triangle animation:
"border-radius: 0;"
like this:
...
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-radius: 0;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
...
I hope help you.
answered Nov 9 at 13:38
MarcusVinnicius
1163
add a comment |
up vote
0
down vote
accepted
for to fix this slight bug, you shoud to include this property in triangle animation:
"border-radius: 0;"
like this:
...
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-radius: 0;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
...
I hope help you.
answered Nov 9 at 13:38
MarcusVinnicius
1163
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
for to fix this slight bug, you shoud to include this property in triangle animation:
"border-radius: 0;"
like this:
...
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-radius: 0;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
...
I hope help you.
answered Nov 9 at 13:38
MarcusVinnicius
1163
for to fix this slight bug, you shoud to include this property in triangle animation:
"border-radius: 0;"
like this:
...
/*trianle*/
50% {
width: 0;
height: 0;
border: 0 solid transparent;
border-radius: 0;
border-right-width: 50px;
border-left-width: 50px;
border-bottom: 100px solid #6980fe;
background-color: transparent;
}
...
I hope help you.
answered Nov 9 at 13:38
MarcusVinnicius
1163
answered Nov 9 at 13:38
MarcusVinnicius
1163
answered Nov 9 at 13:38
MarcusVinnicius
1163
answered Nov 9 at 13:38
MarcusVinnicius
1163
1163
add a comment |
add a comment |
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%2f53226097%2fcss-animation-circle-triangle-square%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
If one of the answers below fixes your issue, you should accept it (click the check mark next to the appropriate answer). That does two things. It lets everyone know your issue has been resolved to your satisfaction, and it gives the person that helps you credit for the assist. See here for a full explanation.
– Andrew Bone
Nov 9 at 14:00