Html 如何防止css元素在转换期间移动

当我在css元素上使用转换时，它下面的东西会移动。下面是一个关于JSFIDLE的示例： （看看JSFIDLE，代码片段似乎不起作用）

h1{
字体大小
}
h1：悬停{
显示：内联；
字号：3em；
-webkit转换：字体大小。2s线性；
-moz转换：字体大小。2s线性；
-ms转换：字体大小。2s线性；
-o-transition：字体大小。2s线性；
过渡：字体大小。2s线性；
}

你好

我想你需要修复的只是悬停时坏的

动画，
也许这就是你想要的：

您的
动画
看起来很糟糕，因为您声明了
display:inline在
内：悬停
而不是在主
元素本身中，这将使默认
显示：block从
更改为
显示：内联仅当它悬停时。它是上下跳跃的，因为
内联元素
在默认情况下不能有
边距
，因此您需要避免不良的
动画
，或者将您的样式更改为其中之一

h1 {
    -webkit-transition: font-size .2s linear;
    -moz-transition: font-size .2s linear;
    -ms-transition: font-size .2s linear;
    -o-transition: font-size .2s linear;
    transition: font-size .2s linear;
}
h1:hover {
    font-size: 3em;
}

这将保留

这将把
的默认
块
元素更改为
内联

h1 {
    margin: 0;
    -webkit-transition: font-size .2s linear;
    -moz-transition: font-size .2s linear;
    -ms-transition: font-size .2s linear;
    -o-transition: font-size .2s linear;
    transition: font-size .2s linear;
}
h1:hover {
    display: inline;
    font-size: 3em;
}

这会将
悬停时的
块的默认
元素更改为
内联
，但会删除使其跳跃的默认
边距（这将与第二个相同）
好吧，简单的跨浏览器答案是将HTML标记更改为：

 <div id="h1box">
         <h1>Hello</h1>
    </div>

基本上，我们消除了
hr
元素的浏览器渲染之间的差异，使用更简单、更容易的方法来调整元素，如
div
，然后通过对
h1
元素应用
position:absolute
来移除元素流，这样动画就不会影响它下面的任何内容。简单的跨浏览器解决方案，在每个浏览器中看起来都一样

为什么要阻止
移动？这不是会让
和单词
Hello
互相崩溃吗？你需要修什么？动画开始时是不是过渡不好？有时候你只需要绝对定位。
 <div id="h1box">
         <h1>Hello</h1>
    </div>

#h1box {
    position:relative;
    height:80px;
    border-bottom:1px solid #333;
}
h1 {
    position:absolute;
    top:5px left:5px;
}
h1:hover {
    display: inline;
    font-size: 3em;
    -webkit-transition: font-size .2s linear;
    -moz-transition: font-size .2s linear;
    -ms-transition: font-size .2s linear;
    -o-transition: font-size .2s linear;
    transition: font-size .2s linear;
}