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

Question

我试图让每一个字母在悬停时变得更大。我得到了那个动画，但我想摆脱整个句子移动。我尝试过使用绝对定位;它没有用。

这是jsfiddle。

HTML：

<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>

CSS：

        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;}
        }

Answer 1

您可以动画font-size

，而不是为transform: scale()属性设置动画

＆＃13;

＆＃13;

h1 {
            text-align: center;
            
        }
        span {
            font-size: 3em;
            display: inline-block;
        }
        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 {transform: scale(1);}
            50% {transform: scale(1.3);}
        }
        @keyframes letters {
            from,to {transform: scale(1);}
            50% {transform: scale(1.3);}
        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在float: left元素上添加span即可。但是，您需要以h1为中心，取宽度并制作margin: auto。

Fiddle