CSS动画圆-三 Angular -正方形

Question

我正在玩弄 CSS 动画以获得乐趣。我有限的经验阻碍了这一进程。

下面的脚本将圆形转换为三 Angular 形，再转换为正方形，然后反转。然而，圆形和三 Angular 形之间的动画有一个小错误。我希望它与边界有关，但我似乎无法修复它。 (我没有编程背景..:))

有人能给我一个正确的方向吗？

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

Answer 1

为了修复这个小错误，你应该在三 Angular 形动画中包含这个属性:

“边界半径:0；”

像这样:

...

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

...

希望对你有帮助。