代码之家 › 专栏 › 技术社区 › Sergey Rudenko

通过关键帧加载微调器动画-无法理解概念?

animation css3

0

Sergey Rudenko · 技术社区 · 6 年前

我正在学习css动画,我想我从概念上理解它是如何工作的。

我决定创建一个加载微调器:一个div,其宽度/高度为0,但其边框被调整为创建“菱形”外观:

那么,这个微调器的动画将有5个“状态”:

初始状态0-可见全菱形
状态1:左边界打开,其他3个都关闭
状态2:顶部边界打开,所有其他边界关闭
状态3:右边界打开,所有其他边界关闭
状态4:底部边界打开,所有其他边界关闭

我认为上面的逻辑实现非常简单:

创建一个div,添加类“spinner”。
在CSS样式中,div作为初始状态
创建动画引用
创建@keyframes动画:0%,100%=初始状态0,20%=状态1,40%=状态2,60%=状态3,80%=状态4

然后确保动画被设置为无限,就是这样,这里是实现,它肯定不会像我上面期望的那样工作。

.spinner {
  /* initial state 0 */:
  position: absolute;
  left: 20px;
  top: 20px;
  width: 0px;
  height: 0px;
  border-left: 100px solid darkgrey;
  border-top: 100px solid lightgrey;
  border-right: 100px solid grey;
  border-bottom: 100px solid black;
  background-color: dimgrey;
  animation: spinning 3s infinite;
}
@keyframes spinning {
  0%, 100% {
/* initial state 0 */
border-left: 100px solid darkgrey;
border-top: 100px solid lightgrey;
border-right: 100px solid grey;
border-bottom: 100px solid black;
  }
  20% {
/* state 1 */
border-left: 100px solid darkgrey;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
  }
  40% {
/* state 2 */
border-left: 100px solid transparent;
border-top: 100px solid lightgrey;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
  }
  60% {
/* state 3 */
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-right: 100px solid grey;
border-bottom: 100px solid transparent;
  }
  80% {
/* state 4 */
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;
  }
}

<div class="spinner"></div>

我错过了什么我想了解什么逻辑css动画下面?我读了一些关于css技巧的文章,但这些都是更有效的例子,我想掌握背后的概念;/有什么建议吗?

更新:好像我留下了逗号;(修复例子)

1 回复 | 直到 6 年前

1

3

Justin Pearce 6 年前

您的 keyframes 定义正在破坏它。移除它们,使其看起来像这样:

@keyframes spinning {
  0%, 100% {
    /* initial state 0 */
    border-left: 100px solid darkgrey;
    border-top: 100px solid lightgrey;
    border-right: 100px solid grey;
    border-bottom: 100px solid black;
  }
  20% {
    /* state 1 */
    border-left: 100px solid darkgrey;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
  }
  40% {
    /* state 2 */
    border-left: 100px solid transparent;
    border-top: 100px solid lightgrey;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
  }
  60% {
    /* state 3 */
    border-left: 100px solid transparent;
    border-top: 100px solid transparent;
    border-right: 100px solid grey;
    border-bottom: 100px solid transparent;
  }
  80% {
    /* state 4 */
    border-left: 100px solid transparent;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid black;
  }
}