Html 从中心显示的关键帧动画

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

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

我怎样才能使星星从中心出现，而不是从左上角沿对角线滑动

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

有人知道我做错了什么吗

正文{
背景色：#F5；
颜色：#555；
字体大小：1.1米；
字体系列：“Lato”，无衬线；
}
.明星{
背景色：#f1c40f；
颜色：白色；
宽度：250px；
高度：250px；
保证金：30像素自动；
文本对齐：对齐；
-webkit动画名称：示例；/*Chrome、Safari、Opera*/
-webkit动画持续时间：4s；/*Chrome、Safari、Opera*/
-webkit动画迭代计数：1向前；/*Chrome、Safari、Opera*/
动画名称：示例；
动画持续时间：4s；
动画迭代次数：向前1次；
}
/*铬、狩猎、歌剧*/
@-webkit关键帧示例{
0%, 49% {
背景色：红色；
左：0px；
顶部：0px；
高度：50px；
宽度：50px；
边界半径：50%；
}
50%,
100% {
内部形状：多边形（125px 0、175px 85px、250px 90px、190px 160px、225px 250px、125px 210px、25px 250px、60px 160px、0px 90px、75px 85px）；
形状填充：10px；
/*过渡：所有的1容易*/
-webkit剪辑路径：多边形（125px 0、175px 85px、250px 90px、190px 160px、225px 250px、125px 210px、25px 250px、60px 160px、0px 90px、75px 85px）；
}
/*标准语法*/
@关键帧示例{
0%, 49% {
背景色：红色；
左：0px；
顶部：0px；
高度：50px；
宽度：50px；
边界半径：50%；
}
50%,
100% {
内部形状：多边形（125px 0、175px 85px、250px 90px、190px 160px、225px 250px、125px 210px、25px 250px、60px 160px、0px 90px、75px 85px）；
形状填充：10px；
/*过渡：所有的1容易*/
-webkit剪辑路径：多边形（125px 0、175px 85px、250px 90px、190px 160px、225px 250px、125px 210px、25px 250px、60px 160px、0px 90px、75px 85px）；
}
}

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

这是因为下面一行中可能存在打字错误。您已将

转发

设置为迭代计数属性，因此

动画填充模式

采用其默认值（即

无

）。这将使

div.star

恢复到其原始形状（动画开始前的一个，正方形）动画完成后。从下行删除

向前

，并将其设置为正确的属性将解决此问题

animation-iteration-count: 1 forwards;

---

我怎样才能使星星从中心出现，而不是从左上角沿对角线滑动

好吧，让星星从中心出现（好像它在成长）这几乎是不可能的。我稍后会解释为什么部分，但为什么星星看起来像是在对角线上滑动是很简单的解释。元素的初始尺寸是250x250，一旦动画开始，它是50x50，并一直保持到动画的

49%

。在

50%

没有指定高度或宽度ied，因此元素开始从50x50逐渐增长到其原始大小，即.250x250（此增长将在100%时完成）。由于元素具有

边距：0 auto

，因此它始终与容器中心对齐，因此当它增长到其全尺寸时，它看起来像顶部中心点（50%，0%）点是固定的，元素向右、左和底部扩展。现在，这与

剪辑路径

相结合，产生对角线移动效果

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

正文{
背景色：#F5；
颜色：#555；
字体大小：1.1米；
字体系列：“Lato”，无衬线；
}
.明星{
背景色：#f1c40f；
颜色：白色；
宽度：250px；
高度：250px；
保证金：30像素自动；
文本对齐：对齐；
动画名称：示例；
动画持续时间：4s；
动画迭代次数：1；
动画填充模式：正向；
}
@关键帧示例{
0%, 49% {
高度：50px；
宽度：50px；
}
50%,
100% {}
}

可以接受吗？基本上，从no

clip path

到

clip path

的50%变化似乎导致了第二个和第三个问题。@Harry，是的，太完美了！谢谢！太棒了，谢谢你，回答得很好！我有一个关于

-webkit clip path

的问题。我将我的星号改成了一个图像，并删除了

-webkit剪辑路径

因为我喜欢你的片段如何成长为形状，这就是我所追求的。为什么我的星星出现在圆圈开始消失之前？？使用CSS将圆圈逐渐转换为星星几乎是不可能的，因为这样我们就需要使用多边形剪辑路径创建圆圈，这是不可能的。我想可以用SVG实现，但我现在不能提供一个示例。我明天早上再看。@Paul：我想你还没有看到我的一个例子，它有图像出现在圆上的原因。逐渐变换是不可能的。我的意思是逐渐地将圆形状变换成星形是不可能的。你现在正在做的是y所做的是将一个圆转换成一个正方形（这是可能的），背景图像是一个星星。这是另一个渐变的例子。明白了，所以没有图像背景。这就是你所做的一切吗？现在似乎工作得更好了。完美。正是我想要的。谢谢你的帮助！