Question

我使用@keyframes从0％到50％到100％在百分比期间，我想改变svg元素的行为。

@keyframes scale {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
}
100% {
    opacity:0;
}
}

.head_top{ 
    animation: scale 1s ease-in-out 1 backwards;
}

SVG元素：

<g><!-- HEAD TOP -->
    <path class="head_top" d="M381,230.571h.008A191.367,191.367,0,0,1,555.278,342.83a177.166,177.166,0,1,0-348.555,0A191.373,191.373,0,0,1,381,230.571Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</g>

因此，从scale(0)到scale(1)的元素从0％到50％从{50}到100％，opacity变为0 这一切都有效。但是，在到达opacity(0)后，元素将返回可见状态。

我想我错过了@keyframes中的某些内容，但无法弄清楚是什么！

----------- ------------ UPDATE
我必须是某种特殊的愚蠢但我使用以下内容。

@keyframes fadeout {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
    opacity:0;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
    opacity:1;
}
100% {
    opacity:0;
}
}
.chin{ 
    animation: fadeout 1s ease-in-out 1 forwards; animation-delay: 2s;  
}

使用此SVG：

<g><!-- CHIN -->
    <circle class="chin" cx="414.4" cy="545.4" r="109.5" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.012"/>
</g>

该圈应该从opacity:0;和scale:0;转到1。但在第一帧，圆圈是完全可见的！之后动画开始并运行。为什么第一帧上的圆圈可见？

Answer 1

animation-fill-mode：向前;似乎是你正在寻找的东西。

目标将保留执行期间遇到的最后一个关键帧设置的计算值。

您可以用速记来设置它，以替换您当前拥有的向后关键字。

html, body {
  width: 100%;
  height: 100%;
}

@keyframes scale {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
}
100% {
    opacity:0;
}
}

.head_top{ 
    animation: scale 1s ease-in-out 1 forwards;
}

<svg width="100%" height="100%">
  <g><!-- HEAD TOP -->
    <path class="head_top" d="M381,230.571h.008A191.367,191.367,0,0,1,555.278,342.83a177.166,177.166,0,1,0-348.555,0A191.373,191.373,0,0,1,381,230.571Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</g>
  </svg>

CSS动画不透明度（0）可以追溯到1

1 个答案: