我的第一个 CSS SVG 动画有效，但第二个无效

Question

我无法再仔细考虑了，我尝试了很多延迟、填充选项等变化……不可能（不幸的是不是不可能）同一种东西比其他。我有一个由两个 SVG 组成的页面标题。我隐藏这两个 SVG 直到预加载器打开页面，然后用 Jquery 显示它们，然后第一个 SVG 出现并播放动画，然后过一秒钟另一个播放相同类型的动画。 Jquery 效果很好，第一个动画播放效果很好，但第二个动画效果不佳。我做了一个 jsfiddle，两个动画都运行良好：https://jsfiddle.net/igorlaszlo/r2gtwpmb/37/，所以我猜 plugin/script 可以阻止第二个动画。这是我的测试网站：http://feketekutya.com/test/

HTML（我缩短了路径）

<section class="welcome">
    <svg xmlns="http://www.w3.org/2000/svg" width="1e3pt" height="350pt" viewBox="0 0 1e3 350" id="title">
        <path fill="none" stroke="#fff" class="go" d="..." />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="400pt" height="70pt" viewBox="0 0 400 70" id="subtitle">
        <path fill="none" stroke="#2b4462" class="go2" d="..." />
</section>

CSS

#title {
  position:relative;
  display:none;
  margin:20% 0 0;
  padding:0 0 0 30px;
  width: 48%;
  max-width:1000px;
  height: auto;
  max-height:350px;
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
  z-index:2
}
.go {
  stroke: #fff;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation:go 3s linear forwards;
}
@keyframes go {
  0% {
      stroke-width: 4;
      stroke-dashoffset: 1800;
      fill: rgba(255,255,255,0);
  }
  100% {
    stroke-width: 1;
    stroke-dashoffset: 0;
    fill: rgba(255,255,255,1);
  }
}
#subtitle {
  position:relative;
  display:none;
  margin:50px 0 0;
  padding:0 0 0 32%;
  width: 20%;
  max-width:400px;
  height: auto;
  max-height:70px;
  z-index:2
}
.go2 {
  stroke: #2b4462;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation:go2 3s linear forwards;
  fill: rgba(43,68,98,1);
}
@keyframes go2 {
  0% {
      stroke-width: 4;
      stroke-dashoffset: 700;
      fill: rgba(43,68,98,0);
  }
  100% {
    stroke-width: 1;
    stroke-dashoffset: 0;
    fill: rgba(43,68,98,1);
  }
}

Jquery

$(document).ready(function() {

    $('body').hide();
    
    //calling jPreLoader
    $('body').jpreLoader({
        showSplash: false,
        showPercentage: false,
        splashVPos: null,
        loaderVPos: null,
        autoClose: true,        
    }, function() { //callback function
        $('body').fadeIn(0);
        $('#title').css('display', 'block');
        $('#subtitle').css('display', 'block');
    });
});

Answer 1

我在你的网站上看不到字幕。请在 css.

中更改您的填充

#subtitle {
 padding:0;
...
...
}

我的第一个 CSS SVG 动画有效，但第二个无效

My first CSS animation with SVG works but not the second

jquery

svg

css-animations