从中心出现的关键帧动画答案

【问题标题】：Keyframe animation appearing from the center从中心出现的关键帧动画
【发布时间】：2016-03-05 12:49:36
【问题描述】：

我正在创建一个关键帧过渡序列。我希望圆圈出现两秒钟，然后星星出现另外两秒钟。我遇到了几个问题。

为什么我的星星在动画结束时变成了一个矩形？
如何让星星从中心出现，而不是从左上角斜向滑入？
为什么我的红色圆圈会消失一两秒然后星星出现？

有谁知道我做错了什么？

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star {
  background-color: #f1c40f;
  color: white;
  width: 250px;
  height: 250px;
  margin: 30px auto;
  text-align: justify;
  -webkit-animation-name: example;  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;  /* Chrome, Safari, Opera */
  -webkit-animation-iteration-count: 1 forwards;  /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1 forwards;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
  0%, 49% {
    background-color: red;
    left: 0px;
    top: 0px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  50%,
  100% {
    shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
    shape-padding: 10px;
    /*transition: all 1s ease; */
    -webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
  }
  /* Standard syntax */
  @keyframes example {
    0%, 49% {
      background-color: red;
      left: 0px;
      top: 0px;
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    50%,
    100% {
      shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
      shape-padding: 10px;
      /* transition: all 1s ease; */
      -webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
    }
  }

<div class="star">
</div>

【问题讨论】：

this 可以接受吗？基本上从没有clip-path 到clip-path 50% 的变化似乎导致了第二个和第三个问题。
@Harry 是的，这太完美了！谢谢！

标签： html css animation css-animations

【解决方案1】：

为什么我的星星在动画结束时变成了一个矩形？

那是因为下一行中可能有拼写错误。您已将forwards 设置为迭代计数属性，因此animation-fill-mode 采用其默认值（即none）。这使得div.star 在动画完成后迅速恢复到其原始形状（动画开始之前的形状，一个正方形）。从下面的行中删除 forwards 并将其设置为正确的属性将解决此问题。

animation-iteration-count: 1 forwards;

我怎样才能让星星从中心出现，而不是从左上角对角滑入？

嗯，让星星从中心出现（好像它在成长）几乎是不可能的。稍后我将解释为什么部分，但为什么星星看起来像对角线滑动是相当简单的解释。元素的初始尺寸是 250x250，一旦动画开始，它就是 50x50 并且一直保持到动画的49%。在50% 没有指定高度或宽度，因此元素开始从 50x50 逐渐增长到其原始大小，即。 250x250（此增长将以 100% 完成）。由于元素具有margin: 0 auto，因此它始终相对于容器居中对齐，因此当它增长到全尺寸时，看起来顶部中心点（50%、0%）点是固定的并且元素向右侧，左侧和底部。现在再加上clip-path 会产生对角线移动的效果。

显示元素在没有剪辑路径的情况下如何增长的片段：

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star {
  background-color: #f1c40f;
  color: white;
  width: 250px;
  height: 250px;
  margin: 30px auto;
  text-align: justify;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes example {
  0%, 49% {
    height: 50px;
    width: 50px;
  }
  50%,
  100% {}
}

<div class="star">
</div>

显示成长过程中 5 个阶段的剪辑路径效果的片段：

下面的 sn-p 将使幻灯片的原因更清楚，因为您可以看到形状在增长过程中的 5 个阶段（从 50x50 到 250x250）

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star {
  background-color: #f1c40f;
  color: white;
  margin: 30px auto;
  text-align: justify;
  -webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
}
.dim-50 {
  height: 50px;
  width: 50px;
}
.dim-100 {
  height: 100px;
  width: 100px;
}
.dim-150 {
  height: 150px;
  width: 150px;
}
.dim-200 {
  height: 200px;
  width: 200px;
}
.dim-250 {
  height: 250px;
  width: 250px;
}

<div class="star dim-50">
</div>
<div class="star dim-100">
</div>
<div class="star dim-150">
</div>
<div class="star dim-200">
</div>
<div class="star dim-250">
</div>

为什么我的红色圆圈会消失一两秒然后星星出现？

这部分是因为clip-path 和50%, 100% 关键帧中缺少height 和width 设置。由于元素只是从 50x50 逐渐增长到 250x250（直到最后才达到其全尺寸），因此您根据原始尺寸 (250x250) 设计的 clip-path 实际上仅在 @987654343 左右开始工作@ 标记。这是因为clip-path 中使用的像素值。例如，第一个点是 125,0，但元素的宽度在 49% 处仅为 50px，因此其宽度仅在 68.75% 处变为 125px（50% 持续时间增加 200px 意味着 18.75% 时间增加 75px 假设一个线性计时功能，为方便起见，它会更长一些，但你明白了）。因此，从大约 50% 大关到 68.75% 大关，您什么都看不到。

消失的另一个原因也可归因于0%, 49% 关键帧中缺少clip-path 设置。因此，元素的剪辑路径从开始时的无剪辑到 50% 标记处的实际剪辑路径缓慢地进行动画处理。

解决方案：

有两种解决方案，分别如下：

使用您原来的方法，将height: 250px、width: 250px 和border-radius: 0% 添加到50%, 100% 关键帧。在 0%, 49% 关键帧处的元素上设置一个虚拟剪辑路径。

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star {
  background-color: #f1c40f;
  color: white;
  width: 250px;
  height: 250px;
  margin: 30px auto;
  text-align: justify;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes example {
  0%, 49% {
    background-color: red;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    -webkit-clip-path: polygon(0 0, 50px 0, 50px 50px, 0 50px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  50%,
  100% {
    height: 250px;
    width: 250px;
    border-radius: 0%;
    shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
    shape-padding: 10px;
    -webkit-clip-path: polygon(125px 0px, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
  }
}

<div class="star">
</div>

在动画本身开始时将元素的height 和width 设置为250px，使用半径为25px 的圆形clip-path 来生成圆形。这样我们就可以避免对虚拟剪辑路径的需要。我更喜欢这种方法，因为它不需要虚拟剪辑路径。

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
.star {
  background-color: #f1c40f;
  color: white;
  width: 250px;
  height: 250px;
  margin: 30px auto;
  text-align: justify;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes example {
  0%, 49% {
    background-color: red;
    height: 250px;
    width: 250px;
    -webkit-clip-path: circle(25px at center);
  }
  50%,
  100% {
    height: 250px;
    width: 250px;
    shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
    shape-padding: 10px;
    -webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
  }
}

<div class="star">
</div>

【讨论】：

太棒了，谢谢你，很好的回答！我有一个关于-webkit-clip-path 的问题。我将我的星号更改为图像并删除了-webkit-clip-path，因为我喜欢你的 sn-p 是如何变成这个形状的，这就是我所追求的。为什么我的星星在圆圈开始消失之前就出现了？？ jsfiddle.net/ouknt5pa
使用 CSS 将圆形逐渐转换为星形几乎是不可能的，因为那时我们还需要使用多边形剪辑路径创建圆形，这是不可能的。我认为它可以用 SVG 完成，但我现在无法提供示例。我会在早上看到。
@Paul：我想你没有看到我的previous comment 之一，它有图像出现在圆圈上的原因。 逐渐转变是不可能的我的意思是逐渐将圆形转变为星形是不可能的。您当前正在做的是将圆形转换为方形（这是可能的），并以星星作为背景图像。 Here 是另一个渐进式变化的例子。
知道了，所以没有图像背景。这就是你所做的一切吗？现在似乎工作得更好了。
完美。正是我想要的。谢谢大家的帮助！