My first CSS animation with SVG works but not the second-CodePudding

I am not able to more think it over, I tried so many variations playing with delay, fill options, etc... it is impossible (unfortunately not impossible) that the same kind of thing does not work than the other. I have a page title composed by two SVG. I hide the two SVG until preloader opens the page, then with Jquery I display them, then the first SVG appears and plays the animation, then some second later the other one plays the same kind of animation. Jquery works well, also the first animation plays well, but the second one does not. I made a jsfiddle, there both animations work well : https://jsfiddle.net/igorlaszlo/r2gtwpmb/37/, so I just guess that a plugin/script can block the second animation. Here is my test website : http://feketekutya.com/test/

HTML (I shortened paths)

<section >
    <svg xmlns="http://www.w3.org/2000/svg" width="1e3pt" height="350pt" viewBox="0 0 1e3 350" id="title">
        <path fill="none" stroke="#fff"  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"  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');
    });
});

CodePudding user response：

I can't see the subtitle on your website. Please change your padding in css.

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