Html 如何在不改变文本大小的情况下设置每个字母的动画

我正在努力使每一个字母在悬停时都变得更大。我得到了那个动画，但我想摆脱整个句子来移动。我尝试使用绝对定位；它不起作用

这是

HTML:

---

您可以设置

transform:scale（）

h1{
文本对齐：居中；
}
跨度{
字号：3em；
显示：内联块；
}
分区：悬停范围{
动画：.3s信件转发；
}
#let-2{
动画延迟：.1s；
}
#let-3{
动画延迟：.2s；
}
#let-4{
动画延迟：.3s；
}
#let-5{
动画延迟：.4s；
}
#let-6{
动画延迟：.5s；
}
#let-7{
动画延迟：.6s；
}
#let-8{
动画延迟：.7s；
}
#let-9{
动画延迟：.8s；
}
#let-10{
动画延迟：.9秒；
}
@-webkit为字母设置关键帧{
从，到{变换：比例（1）；}
50%{变换：比例（1.3）；}
}
@为字母设置关键帧{
从，到{变换：比例（1）；}
50%{变换：比例（1.3）；}
}

样品
正文

只需在

span

元素上添加

float:left

。但是，您需要将

h1

居中，方法是测量其宽度并设置

margin:auto

---

它在FF/Linux上不起作用，在Chrome中，整个句子（在某些窗口宽度上，它在悬停时分成两行）在Chrome中工作良好。在Firefox中失败。看起来Firefox无法在内联元素上设置

transform

动画。添加

display:inlineblock

似乎很有效。@现在它看起来很完美-很好的答案我喜欢：）

<div>
    <h1>
       <span id='let-1'>S</span><span id='let-2'>a</span><span id='let-3'>m</span><span id='let-4'>p</span><span id='let-5'>l</span><span id='let-6'>e</span>
       <span id='let-7'>T</span><span id='let-8'>e</span><span id='let-9'>x</span><span id='let-10'>t</span>
    </h1>
</div>

        h1 {
            text-align: center; 
        }
        span {
            font-size: 3em;
        }
        div:hover span {
            animation: .3s letters forwards;
        }
        #let-2 {
            animation-delay: .1s;
        }
        #let-3 {
            animation-delay: .2s;
        }
        #let-4 {
            animation-delay: .3s;
        }
        #let-5 {
            animation-delay: .4s;
        }
        #let-6 {
            animation-delay: .5s;
        }
        #let-7 {
            animation-delay: .6s;
        }
        #let-8 {
            animation-delay: .7s;
        }
        #let-9 {
            animation-delay: .8s;
        }
        #let-10 {
            animation-delay: .9s;
        }
        @-webkit-keyframes letters {
            from,to {font-size: 3em;}
            50% {font-size: 4em;}
        }
        @keyframes letters {
            from,to {font-size: 3em;}
            50% {font-size: 4em;}
        }