CSS animation circle-triangle-square

Question

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;
  }
}

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
– Andrew Bone, Commented Nov 9, 2018 at 14:00

MarcusVinnicius · Accepted Answer · 2018-11-09 13:38:53Z

1

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, 2018 at 13:38

MarcusVinnicius

2401 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS animation circle-triangle-square

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related