Question

我正在使用关键帧将SVG路径填充从可见更改为不可见。

它起作用了，但是当动画结束时，路径返回到他的初始颜色（黑色），我希望它保持白色。

#secondletter {
  animation-name: col;
  animation-duration: 2s;
  animation-timing-function: ease-in;
}
#thirdletter {
  animation-name: col;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
#fourthletter {
  animation-name: col;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

@keyframes col {
  0% {fill:black}
  100% {fill:#fff}
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<g>
	<path d="M297,293l18.2,68.6c4.2,14.8,7.3,29.4,10.1,43.4h0.8c2.8-14,7.3-28.6,12-43.1l22.4-68.9H381l21,67.8
		c4.8,15.7,9,30.2,12,44.2h0.8c2.2-14,5.9-28.3,10.4-44.2l19.3-67.8h24.4l-44,135.2h-22.4l-20.4-64.7c-4.8-15.1-8.7-28.6-12-44.5
		h-0.6c-3.4,16.2-7.6,30.5-12.3,44.8l-21.8,64.4H313L272.1,293H297z"/>
	<path id="secondletter"  d="M507.3,365c0.6,33.3,21.6,47,46.5,47c17.6,0,28.6-3.1,37.5-7l4.2,17.6c-8.4,3.9-23.5,8.7-45.1,8.7
		c-41.7,0-66.6-27.7-66.6-68.3c0-41.2,24.1-73.1,63.8-73.1c44,0,55.7,38.6,55.7,63.6c0,5-0.6,9-1.1,11.5H507.3z M579.5,347.3
		c0.3-15.4-6.4-39.8-34.2-39.8c-24.9,0-35.8,22.7-37.8,39.8H579.5z"/>
	<path d="M643.4,293l18.2,68.6c4.2,14.8,7.3,29.4,10.1,43.4h0.8c2.8-14,7.3-28.6,12-43.1l22.4-68.9h20.4l21,67.8
		c4.8,15.7,9,30.2,12,44.2h0.8c2.2-14,5.9-28.3,10.4-44.2l19.3-67.8h24.4l-44,135.2h-22.4l-20.4-64.7c-4.8-15.1-8.7-28.6-12-44.5
		h-0.6c-3.4,16.2-7.6,30.5-12.3,44.8l-21.8,64.4h-22.4L618.5,293H643.4z"/>
	<path id="thirdletter" d="M853.7,365c0.6,33.3,21.6,47,46.5,47c17.6,0,28.6-3.1,37.5-7l4.2,17.6c-8.4,3.9-23.5,8.7-45.1,8.7
		c-41.7,0-66.6-27.7-66.6-68.3c0-41.2,24.1-73.1,63.8-73.1c44,0,55.7,38.6,55.7,63.6c0,5-0.6,9-1.1,11.5H853.7z M925.9,347.3
		c0.3-15.4-6.4-39.8-34.2-39.8c-24.9,0-35.8,22.7-37.8,39.8H925.9z"/>
	<path id="fourthletter"  d="M980.2,229.5h24.4v85.1h0.6c8.7-15.1,24.4-24.6,46.2-24.6c33.6,0,57.4,28,57.4,68.9c0,48.4-31.1,72.5-61,72.5
		c-19.6,0-35.3-7.6-45.6-25.2h-0.6l-1.1,22.1h-21.3c0.6-9.2,1.1-23,1.1-34.7V229.5z M1004.6,373.9c0,3.1,0.3,6.2,1.1,9
		c4.8,17.4,19.3,28.8,37,28.8c26,0,41.2-21,41.2-52.1c0-27.2-14-50.4-40.6-50.4c-16.5,0-32.2,11.5-37.2,30.2
		c-0.6,3.1-1.4,6.2-1.4,10.1V373.9z"/>
  
</g>
</svg>

即使动画结束，如何保持动画颜色？

Answer 1

我想你只是想要

json file
{
    "id": "2730",
    "username": "jameskwak",
    "firstName": "James",
    "lastName": "Kwak",
    "email": "jameskwak@gmail.com",
    "password": "jameskwak",
    "phone": "4081234567",
    "userStatus": "0"
}

According to MDN转发表示

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

喜欢...

animation-fill-mode: forwards;

#secondletter {
  animation-name: col;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
#thirdletter {
  animation-name: col;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
#fourthletter {
  animation-name: col;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes col {
  0% {fill:black}
  100% {fill:#fff}
}

SVG填充动画返回初始状态

1 个答案: