NPM SVG Animation https://code.h5jun.com/bew

index.html

<style id="jsbin-css">
#long {
    opacity: 0;
    animation-name: show;
    animation-delay: .5s;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes show {
  to {
      opacity: 1;
  }
}

#N {
    animation-name: N-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes N-move {
    to {
        transform: translateX(-328px) translateY(0px);
    }
}
  
#P {
    animation-name: P-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes P-move {
    to {
        transform: translateX(-177px) translateY(0px);
    }
}
  
#M {
    animation-name: M-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes M-move {
    to {
        transform: translateX(93px) translateY(0px);
    }
}
</style>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="823px" height="100px" viewBox="0 0 823 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="72" font-family="PingFangSC-Semibold, PingFang SC" font-weight="500">
  <g id="long" fill="#DDDDDD">
    <text id="Node">
      <tspan x="0" y="76">Node</tspan>
    </text>
    <text id="Package">
      <tspan x="204" y="76">Package</tspan>
    </text>
    <text id="Manager">
      <tspan x="522" y="76">Manager</tspan>
    </text>
    <text id="pos-N">
      <tspan x="0" y="76">N</tspan>
    </text>
    <text id="pos-P">
      <tspan x="204" y="76">P</tspan>
    </text>
    <text id="pos-M">
      <tspan x="522" y="76">M</tspan>
    </text>
  </g>
  <g id="short" transform="translate(328, 0)" fill="#FF0000">
    <text id="N">
      <tspan x="0" y="76">N</tspan>
    </text>
    <text id="P">
      <tspan x="53" y="76">P</tspan>
    </text>
    <text id="M">
      <tspan x="101" y="76">M</tspan>
    </text>
  </g>
</g>
</svg>
<script id="jsbin-javascript">
// var style = `
//  #long {
//     animation-name: show;
//     animation-delay: .5s;
//     animation-duration: .5s;
//     animation-fill-mode: forwards;
//     animation-iteration-count: 1;
//     animation-timing-function: ease;
//  }
// `;
// style += ['N', 'P', 'M'].map(function(item) {
//   var start = document.querySelector('#'+item).getClientRects()[0];
//   var end = document.querySelector('#pos-'+item).getClientRects()[0];
//   return `
// #${item} {
//     animation-name: ${item}-move;
//     animation-duration: .5s;
//     animation-fill-mode: forwards;
//     animation-iteration-count: 1;
//     animation-timing-function: ease;
// }
// @keyframes ${item}-move {
//     to {
//         transform: translateX(${(end.left - start.left)}px) translateY(${(end.top - start.top)}px);
//     }
// }
//   `;
// }).join('');

// console.log(style);
</script>

<script id="jsbin-source-css" type="text/css">#long {
    opacity: 0;
    animation-name: show;
    animation-delay: .5s;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes show {
  to {
      opacity: 1;
  }
}

#N {
    animation-name: N-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes N-move {
    to {
        transform: translateX(-328px) translateY(0px);
    }
}
  
#P {
    animation-name: P-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes P-move {
    to {
        transform: translateX(-177px) translateY(0px);
    }
}
  
#M {
    animation-name: M-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes M-move {
    to {
        transform: translateX(93px) translateY(0px);
    }
}</script>

<script id="jsbin-source-javascript" type="text/javascript">// var style = `
//  #long {
//     animation-name: show;
//     animation-delay: .5s;
//     animation-duration: .5s;
//     animation-fill-mode: forwards;
//     animation-iteration-count: 1;
//     animation-timing-function: ease;
//  }
// `;
// style += ['N', 'P', 'M'].map(function(item) {
//   var start = document.querySelector('#'+item).getClientRects()[0];
//   var end = document.querySelector('#pos-'+item).getClientRects()[0];
//   return `
// #${item} {
//     animation-name: ${item}-move;
//     animation-duration: .5s;
//     animation-fill-mode: forwards;
//     animation-iteration-count: 1;
//     animation-timing-function: ease;
// }
// @keyframes ${item}-move {
//     to {
//         transform: translateX(${(end.left - start.left)}px) translateY(${(end.top - start.top)}px);
//     }
// }
//   `;
// }).join('');

// console.log(style);</script>

jsbin.bew.css

#long {
    opacity: 0;
    animation-name: show;
    animation-delay: .5s;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes show {
  to {
      opacity: 1;
  }
}

#N {
    animation-name: N-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes N-move {
    to {
        transform: translateX(-328px) translateY(0px);
    }
}
  
#P {
    animation-name: P-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes P-move {
    to {
        transform: translateX(-177px) translateY(0px);
    }
}
  
#M {
    animation-name: M-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes M-move {
    to {
        transform: translateX(93px) translateY(0px);
    }
}

jsbin.bew.js

var style = `
 #long {
    animation-name: show;
    animation-delay: .5s;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
 }
`;
style += ['N', 'P', 'M'].map(function(item) {
  var start = document.querySelector('#'+item).getClientRects()[0];
  var end = document.querySelector('#pos-'+item).getClientRects()[0];
  return `
#${item} {
    animation-name: ${item}-move;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
@keyframes ${item}-move {
    to {
        transform: translateX(${(end.left - start.left)}px) translateY(${(end.top - start.top)}px);
    }
}
  `;
}).join('');

console.log(style);