动画 grow/shrink 文本 w/o 段落移动

Question

我有一段文本，其中某些单词或段落中的部分应该过渡为红色 --> 增加字体大小，几秒钟后 return 变为正常字体大小，同时保持红色突出显示。（所有这些我都可以使用 CSS 转换和 Jquery 添加 class 到 span 对象）但是 - 我的目标是让 grow/shrink 发生而不引起周围随着字体大小的增加和 returns.

，段落文本变为 shift/adjust/collapse

它应该如下图所示发生。我怎样才能使这种效果起作用并防止周围的文本来自 shifting/adjusting?

查看片段全屏 - 它看起来是 div window 的错误内联

$('#svcdef p').each(function(index) {
  var li = $(this);

  setTimeout(function() {
    li.slideDown(900);
  }, 500 * index);

  setTimeout(function() {
    $('#svcdef p span').addClass('cfred');
  }, 3000);

  setTimeout(function() {
    $('#svcdef p span').removeClass('cfred');
    $('#svcdef p span').css('color', 'red');
  }, 8000);
});

#svcdef {
  text-align: left;
  height: 820px !important;
  color: #FFFFFF;
  text-align: justify;
  overflow: hidden;
  background-color: black;
}
#svcdef p {
  padding-left: 8px;
  padding-right: 8px;
}
#svcdef p span {
  transition: color 4s, font-size 2s ease-in-out;
}
.cfred {
  color: red;
  font-size: 24px;
}
#svc-content {
  height: 490px;
  float: left;
  width: 550px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:yellow;"><b>REPUTATION MANAGEMENT</b>
</div>
<style scoped="scoped">
  p {
    display: none;
  }
</style>
<br />
<div id="svcdef" class="modern-skin">
  <p><i><b>"It takes many good deeds to build a good reputation, and only one bad one to lose it."</b></i> • Benjamin Franklin
    <br>
    <br>
  </p>
  <p>Warren Buffet - Business magnate, Investor and philanthropist once stated "It takes 20 years to build a reputation and five minutes to ruin it. If you think about that, you’ll do things differently." Although a positive reputation for a brand and company
    does not in fact take 20 years to build, it is <span>possible</span> for a single instance of negative consumer engagement to immediately cause <span>20 years</span> or more of damage dependinging on the events that transpired and the manner in which
    the consumer shares the experience. Before the internet, many <span>companies were shielded</span> from negative events occuring with their potential customers, word of mouth remained the the primary means of communicating displeasure and the social
    network of other consumers that a negatively impacted customer could reach was curtailed and more localized. Thus damage could be more easliy mitigated or in some cases ignored.</p>
  <br />
  <p>some other paragraph
  </p>
  <br />
  <p>Yet, another useless paragraph</p>
</div>

Answer 1

你的意思是这样的吗？

body {
  font-size: 25px;
}
boo{
   display:inline-block;
   transform:scale(1);
   transition: all 100ms linear;
}
boo:hover{
  color: red;
  transform:scale(2);
  transition: all 100ms linear;
}

<ol>
<li>This is the test sentence</li>
<li>This is the <boo>test (hover me ;)</boo> sentence</li>
<li>This is the test sentence</li>
</ol>

示例jQuery：

var boo = 0;
setInterval(function(){
    boo==0?$("boo").addClass("booable"):$("boo").removeClass("booable");
    boo=!boo;
},100)

body {
  font-size: 25px;
}
boo {
  display: inline-block;
  transform: scale(1);
  transition: all 100ms linear;
}
.booable{
  color: red;
  transform: scale(2);
  transition: all 100ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li>This is the test sentence</li>
  <li>This is the <boo>test</boo> sentence</li>
  <li>This is the test sentence</li>
</ol>

动画 grow/shrink 文本 w/o 段落移动

Animate grow/shrink text w/o paragraph shift

css

jquery

css-transitions