我不知道我是否得到你或没有什么样的动画你想要的，但它是你正在寻找的东西？

window.addEventListener('load', () => {
  // calculate how much the second span should be pushed
  const indent = document.querySelector('.indent');
  if (indent) {
    const { left } = indent.getBoundingClientRect();
    const { offsetWidth } = indent.parentElement;
    indent.style.setProperty('--indent', offsetWidth - left + 'px');
  }
});

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('p').classList.toggle('on');
});

p {
  max-width: 100%;
  overflow: hidden;
  font-size: 16px
  vertical-align: top;
}

.indent {
  margin-right: 0px;
  transition: margin-right ease-in-out 1s;
}

.indent + * {
  margin-left: 0px;
  transition: margin ease-in-out 1s;
}

.on .indent {
  margin-right: var(--indent);
}

.on .indent + * {
  margin-left: 1.5em;
}

<p>
  <span>How can i use html/css transformation on a paragraph like this so that it is transformed into two (or more) parts, the second part being slightly intended? The first version of this text shows the initial text, </span><span class="indent"></span><span>the second version shows how it should look after animation (ignoring the blockquote markers)</span>
</p>

<button>Toggle</button>