关键帧动画出现问题

分类：编程问答

如何解决关键帧动画出现问题

我正在研究一个项目，该项目在导航栏中包含两个不同颜色的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" width="300" height="50" 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-width="6" mask="url(#path-1-outside-1)"/>
    <path d="M64.2041 50.99V5.06999H72.4641V50.99H79.2541V54H57.4141V50.99H64.2041Z" stroke="#2A9D8F" stroke-width="6" 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-width="6" 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-width="6" 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-width="6" 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-width="6" 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-width="6" 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-width="6" mask="url(#path-1-outside-1)"/>
    </svg>
    <svg id="LRlogo" width="300" height="50" 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-width="6" 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-width="6" 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-width="6" 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-width="6" 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-width="6" 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-width="6" 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-width="6" mask="url(#path-1-outside-1)"/>
      </svg>  
<script src="script.js"></script>
</body>
</html>

解决方法

尝试为关键帧填充1和关键帧填充2取一个不同的名称

关键帧动画不应具有相同的名称。您已经放置了2个关键帧填充和2个关键帧线动画，但是它们具有不同的值

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot