关键帧动画问题
Posted
技术标签:
【中文标题】关键帧动画问题【英文标题】：Trouble with keyframes animation 【发布时间】：2020-12-23 17:22:05 【问题描述】：我正在做一个项目，其中包括两个不同颜色的 svg 作为导航栏中的动画图标。
它们将彼此相邻放置，现在图标通过勾勒出每个单词的字母进行动画处理，并使用透明填充（这很棒） - 但最终填充需要与各自的 svg 一致，这是我遇到减速带的地方。
我为每个 svg 指定了关键帧，但两个 svg 都以相同的颜色填充完成 - 这不是我的目标。附上css。
如果有人遇到这个，一些煽动会很棒！
提前致谢。
const logoOne = document.querySelectorAll('#HRlogo path');
for(let i=0; i<logoOne.length; i++)
console.log(`Letter $i is $logoOne[i].getTotalLength()`);
const logoTwo = document.querySelectorAll('#LRlogo path');
for(let j=0; j<logoTwo.length; j++)
console.log(`Letter $j is $logoTwo[j].getTotalLength()`);
*
padding: 0;
margin: 0;
box-sizing: border-box;
body
width: 100%;
height: 100vh;
background-color: #C00C00;
/*HRLR*/
#HRlogo
position: absolute;
animation: fill 0.5s ease forwards 3.5s;
#HRlogo path:nth-child(1)
stroke-dasharray: 280.9353942871094;
stroke-dashoffset: 280.9353942871094;
animation: line-anim 2s ease forwards;
#HRlogo path:nth-child(2)
stroke-dasharray: 141.5399932861328;
stroke-dashoffset: 141.5399932861328;
animation: line-anim 2s ease forwards 0.3s;
#HRlogo path:nth-child(3)
stroke-dasharray: 273.3261413574219;
stroke-dashoffset: 273.3261413574219;
animation: line-anim 2s ease forwards 0.6s;
#HRlogo path:nth-child(4)
stroke-dasharray: 44.38001251220703;
stroke-dashoffset: 44.38001251220703;
animation: line-anim 2s ease forwards 0.9s;
#HRlogo path:nth-child(5)
stroke-dasharray: 340.57818603515625;
stroke-dashoffset: 340.57818603515625;
animation: line-anim 2s ease forwards 1.2s;
#HRlogo path:nth-child(6)
stroke-dasharray: 302.75201416015625;
stroke-dashoffset: 302.75201416015625;
animation: line-anim 2s ease forwards 1.5s;
#HRlogo path:nth-child(7)
stroke-dasharray: 273.3253173828125;
stroke-dashoffset: 273.3253173828125;
animation: line-anim 2s ease forwards 1.8s;
@keyframes line-anim
to
stroke-dashoffset: 0;
@keyframes fill
from
fill: transparent;
to
fill: #84A59D;
#LRlogo
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: fill 0.5s ease forwards 3.5s;
#LRlogo path:nth-child(1)
stroke-dasharray: 280.9353942871094;
stroke-dashoffset: 280.9353942871094;
animation: line-anim 2s ease forwards;
#LRlogo path:nth-child(2)
stroke-dasharray: 141.5399932861328;
stroke-dashoffset: 141.5399932861328;
animation: line-anim 2s ease forwards 0.3s;
#LRlogo path:nth-child(3)
stroke-dasharray: 273.3261413574219;
stroke-dashoffset: 273.3261413574219;
animation: line-anim 2s ease forwards 0.6s;
#LRlogo path:nth-child(4)
stroke-dasharray: 44.38001251220703;
stroke-dashoffset: 44.38001251220703;
animation: line-anim 2s ease forwards 0.9s;
#LRlogo path:nth-child(5)
stroke-dasharray: 340.57818603515625;
stroke-dashoffset: 340.57818603515625;
animation: line-anim 2s ease forwards 1.2s;
#LRlogo path:nth-child(6)
stroke-dasharray: 302.75201416015625;
stroke-dashoffset: 302.75201416015625;
animation: line-anim 2s ease forwards 1.5s;
#LRlogo path:nth-child(7)
stroke-dasharray: 273.3253173828125;
stroke-dashoffset: 273.3253173828125;
animation: line-anim 2s ease forwards 1.8s;
@keyframes line-anim
to
stroke-dashoffset: 0;
@keyframes fill
from
fill: transparent;
to
fill: #F6BD60;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!--HRLR-->
<svg id="HRlogo" viewBox="0 0 407 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M57.39 50.99H50.6V5.06999H42.34V26.28H18.05V5.06999H9.79V54H18.05V33.98H42.34V54H57.39V50.99ZM9.79 50.99V54H3V50.99H9.79Z" stroke="#2A9D8F" stroke- mask="url(#path-1-outside-1)"/>
<path d="M64.2041 50.99V5.06999H72.4641V50.99H79.2541V54H57.4141V50.99H64.2041Z" stroke="#2A9D8F" stroke- mask="url(#path-1-outside-1)"/>
<path d="M132.211 50.99V54H79.2207V50.99H96.1607C92.1007 48.9367 88.8574 45.9267 86.4307 41.96C84.0507 37.9933 82.8607 33.5133 82.8607 28.52C82.8607 21.38 85.334 15.5 90.2807 10.88C95.2274 6.21333 101.224 3.88 108.271 3.88C115.364 3.88 121.244 5.93333 125.911 10.04L121.501 16.34C119.587 14.7067 117.651 13.5867 115.691 12.98C113.777 12.3267 111.537 12 108.971 12C103.977 12 99.8007 13.4933 96.4407 16.48C93.1274 19.4667 91.4707 23.55 91.4707 28.73C91.4707 33.91 93.104 38.0867 96.3707 41.26C99.6374 44.3867 103.581 45.95 108.201 45.95C112.867 45.95 116.764 44.9467 119.891 42.94V29.5H128.151V46.23C126.424 48.1433 124.324 49.73 121.851 50.99H132.211Z" stroke="#2A9D8F" stroke- mask="url(#path-1-outside-1)"/>
<path d="M186.589 50.99H179.799V5.06999H171.539V26.28H147.249V5.06999H138.989V54H147.249V33.98H171.539V54H186.589V50.99ZM138.989 50.99V54H132.199V50.99H138.989Z" stroke="#2A9D8F" stroke- mask="url(#path-1-outside-1)"/>
<path d="M239.323 50.99V54H224.203L212.513 37.55H201.663V54H186.613V50.99H193.403V5.06999H211.603C219.07 5.06999 224.413 6.32999 227.633 8.84999C230.853 11.37 232.463 15.4067 232.463 20.96C232.463 29.0333 228.94 34.12 221.893 36.22L232.533 50.99H239.323ZM211.953 30.06C216.62 30.06 219.793 29.3367 221.473 27.89C223.153 26.4433 223.993 24.1333 223.993 20.96C223.993 17.74 223.13 15.5467 221.403 14.38C219.677 13.1667 216.597 12.56 212.163 12.56H201.663V30.06H211.953Z" stroke="#2A9D8F" stroke- mask="url(#path-1-outside-1)"/>
<path d="M296.341 50.99V54H237.541V50.99H253.571C249.744 48.7967 246.711 45.7867 244.471 41.96C242.278 38.1333 241.181 33.8633 241.181 29.15C241.181 21.9633 243.654 15.9667 248.601 11.16C253.548 6.30666 259.661 3.88 266.941 3.88C274.221 3.88 280.334 6.30666 285.281 11.16C290.228 15.9667 292.701 21.9633 292.701 29.15C292.701 33.8167 291.581 38.0867 289.341 41.96C287.148 45.8333 284.138 48.8433 280.311 50.99H296.341ZM279.191 16.62C275.878 13.1667 271.794 11.44 266.941 11.44C262.088 11.44 257.981 13.1667 254.621 16.62C251.308 20.0733 249.651 24.2733 249.651 29.22C249.651 34.12 251.308 38.2967 254.621 41.75C257.981 45.2033 262.088 46.93 266.941 46.93C271.794 46.93 275.878 45.2033 279.191 41.75C282.551 38.2967 284.231 34.12 284.231 29.22C284.231 24.2733 282.551 20.0733 279.191 16.62Z" stroke="#2A9D8F" stroke- mask="url(#path-1-outside-1)"/>
<path d="M355.06 50.99V54H339.45L334.55 42.87H310.05L305.15 54H289.54V50.99H297.66L317.89 5.06999H326.71L346.94 50.99H355.06ZM331.19 35.24L322.3 15.08L313.41 35.24H331.19Z" stroke="#2A9D8F" stroke- mask="url(#path-1-outside-1)"/>
<path d="M403.023 50.99V54H348.283V50.99H355.073V5.06999H371.873C380.647 5.06999 387.39 7.21666 392.103 11.51C396.817 15.7567 399.173 21.7533 399.173 29.5C399.173 39.9067 395.067 47.07 386.853 50.99H403.023ZM390.843 29.5C390.843 18.3 384.427 12.7 371.593 12.7H363.333V46.23H372.503C378.43 46.23 382.957 44.83 386.083 42.03C389.257 39.1833 390.843 35.0067 390.843 29.5Z" stroke="#2A9D8F" stroke- mask="url(#path-1-outside-1)"/>
</svg>
<svg id="LRlogo" viewBox="0 0 395 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.17 50.99V54H3V50.99H9.79V5.06999H18.05V46.16H40.38V50.99H47.17Z" stroke="#F6BD60" stroke- mask="url(#path-1-outside-1)"/>
<path d="M101.448 50.99V54H42.6484V50.99H58.6784C54.8518 48.7967 51.8184 45.7867 49.5784 41.96C47.3851 38.1333 46.2884 33.8633 46.2884 29.15C46.2884 21.9633 48.7618 15.9667 53.7084 11.16C58.6551 6.30666 64.7684 3.88 72.0484 3.88C79.3284 3.88 85.4418 6.30666 90.3884 11.16C95.3351 15.9667 97.8084 21.9633 97.8084 29.15C97.8084 33.8167 96.6884 38.0867 94.4484 41.96C92.2551 45.8333 89.2451 48.8433 85.4184 50.99H101.448ZM84.2984 16.62C80.9851 13.1667 76.9018 11.44 72.0484 11.44C67.1951 11.44 63.0884 13.1667 59.7284 16.62C56.4151 20.0733 54.7584 24.2733 54.7584 29.22C54.7584 34.12 56.4151 38.2967 59.7284 41.75C63.0884 45.2033 67.1951 46.93 72.0484 46.93C76.9018 46.93 80.9851 45.2033 84.2984 41.75C87.6584 38.2967 89.3384 34.12 89.3384 29.22C89.3384 24.2733 87.6584 20.0733 84.2984 16.62Z" stroke="#F6BD60" stroke- mask="url(#path-1-outside-1)"/>
<path d="M174.798 50.99V54H148.688L138.398 20.47H137.838L127.548 54H101.438V50.99H118.308L102.277 5.06999H111.168L123.488 40.28L134.408 5.06999H141.827L152.747 40.28L165.068 5.06999H173.958L157.928 50.99H174.798Z" stroke="#F6BD60" stroke- mask="url(#path-1-outside-1)"/>
<path d="M227.497 50.99V54H212.377L200.687 37.55H189.837V54H174.787V50.99H181.577V5.06999H199.777C207.244 5.06999 212.587 6.32999 215.807 8.84999C219.027 11.37 220.637 15.4067 220.637 20.96C220.637 29.0333 217.114 34.12 210.067 36.22L220.707 50.99H227.497ZM200.127 30.06C204.794 30.06 207.967 29.3367 209.647 27.89C211.327 26.4433 212.167 24.1333 212.167 20.96C212.167 17.74 211.304 15.5467 209.577 14.38C207.85 13.1667 204.77 12.56 200.337 12.56H189.837V30.06H200.127Z" stroke="#F6BD60" stroke- mask="url(#path-1-outside-1)"/>
<path d="M284.515 50.99V54H225.715V50.99H241.745C237.918 48.7967 234.885 45.7867 232.645 41.96C230.452 38.1333 229.355 33.8633 229.355 29.15C229.355 21.9633 231.828 15.9667 236.775 11.16C241.722 6.30666 247.835 3.88 255.115 3.88C262.395 3.88 268.508 6.30666 273.455 11.16C278.402 15.9667 280.875 21.9633 280.875 29.15C280.875 33.8167 279.755 38.0867 277.515 41.96C275.321 45.8333 272.312 48.8433 268.485 50.99H284.515ZM267.365 16.62C264.052 13.1667 259.968 11.44 255.115 11.44C250.262 11.44 246.155 13.1667 242.795 16.62C239.482 20.0733 237.825 24.2733 237.825 29.22C237.825 34.12 239.482 38.2967 242.795 41.75C246.155 45.2033 250.262 46.93 255.115 46.93C259.968 46.93 264.052 45.2033 267.365 41.75C270.725 38.2967 272.405 34.12 272.405 29.22C272.405 24.2733 270.725 20.0733 267.365 16.62Z" stroke="#F6BD60" stroke- mask="url(#path-1-outside-1)"/>
<path d="M343.234 50.99V54H327.624L322.724 42.87H298.224L293.324 54H277.714V50.99H285.834L306.064 5.06999H314.884L335.114 50.99H343.234ZM319.364 35.24L310.474 15.08L301.584 35.24H319.364Z" stroke="#F6BD60" stroke- mask="url(#path-1-outside-1)"/>
<path d="M391.197 50.99V54H336.457V50.99H343.247V5.06999H360.047C368.82 5.06999 375.564 7.21666 380.277 11.51C384.99 15.7567 387.347 21.7533 387.347 29.5C387.347 39.9067 383.24 47.07 375.027 50.99H391.197ZM379.017 29.5C379.017 18.3 372.6 12.7 359.767 12.7H351.507V46.23H360.677C366.604 46.23 371.13 44.83 374.257 42.03C377.43 39.1833 379.017 35.0067 379.017 29.5Z" stroke="#F6BD60" stroke- mask="url(#path-1-outside-1)"/>
</svg>
<script src="script.js"></script>
</body>
</html>【问题讨论】：
嗨 :) 你能解释一下你的实际目标吗？ 【参考方案1】：尝试为关键帧填充 1 和关键帧填充 2 赋予不同的名称
关键帧动画不应具有相同的名称。您已经使用不同的值放置了 2 个关键帧填充和 2 个关键帧线动画
【讨论】：
嗨@Mathi 所以，我的目标是第一个SVG“High Road”填充与其笔划轮廓相同的绿色，而对于“Low Road”，它的颜色与黄色相吻合。我承认，我对 Web 开发非常陌生，并且不知道您可以命名关键帧。我该怎么做呢？ 当你定义你的关键帧时，所以在@keyframes fill content 你只需更改填充的名称并放置你想要的任何东西，我会把fill1作为数字工作 然后，当您在 css 中调用动画时，您也必须更改名称。像动画：fill1 2s 缓进 冠军！太精彩了！感谢那。我并没有停下来将 @keyframes 旁边的“填充”视为某种 id。 是的，总是在 @keyframes 之后声明名称，有点像变量以上是关于关键帧动画问题的主要内容，如果未能解决你的问题，请参考以下文章