从中心显示的关键帧动画

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

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

有谁知道我做错了什么？

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>

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

那是因为下面一行中可能存在拼写错误。您已将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 个阶段的剪辑路径效果的代码片段：

下面的代码片段将使幻灯片的原因更加清晰，因为您可以看到形状在增长过程中的 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>

为什么我的红圈消失了一两秒钟，然后星星出现了？

这部分是因为关键帧50%, 100% clip-path和缺乏height和width设置。由于元素只是从 50x50 逐渐增长到 250x250（并且它只有在最后才达到其完整大小），因此您基于原始大小（250x250）设计的clip-path实际上仅在大约 68.75% 标记处开始工作。这是因为 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>

相关内容

最新更新

热门标签：