如何在轉換期間保持css元素不移動

當我在css元素上使用轉換時，它下面的東西會移動。下面是對的jsfiddle一個例子：（看那一個的jsfiddle的代碼片段似乎不工作） http://jsfiddle.net/pgdxd7su/ 如何在轉換期間保持css元素不移動

h1{ 
 
font-size 
 
} 
 
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; 
 
     }

<!DOCTYPE html> 
 
     <body> 
 
     <h1>Hello</h1> 
 
     <hr> 
 
     </body>

會不會有解決這一問題，並從移動保持人力資源的方法嗎？先謝謝了！

來源

2014-09-22 ShaneBacon

爲什麼你需要''

要移動保持？是不是會使'

'和單詞'Hello'相互崩潰？你需要解決什麼問題？動畫開始時它是否是一個壞的過渡？ – Kyojimaru 2014-09-22 02:47:59

有時你只需要絕對定位。 – MindlessRanger 2014-09-23 05:02:27

良好，容易交叉默認margin瀏覽器的答案是你的HTML標記改成這樣：

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

，然後你可以使用你的CSS這樣的：

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

我們基本上擺脫hr元素的瀏覽器渲染之間的差異，使用更加簡單，輕鬆地適應元素，如div，然後通過應用position:absolute到h1元素移除元素的流動，使動畫不會影響下面的任何東西。簡單和跨瀏覽器的解決方案，在每個瀏覽器中看起來都一樣。

See fiddle here

來源

2014-09-22 03:27:20 Devin

我想你需要解決什麼只是animation上懸停不好，也許這是你想要的：Fiddle

您animation很糟糕，因爲你聲明display: inline;的:hover內，而不是在主element本身，這將使默認display: block;從<h1>更改爲display: inline;只有當它被徘徊。它上竄下跳，因爲inline element不能有margin上默認其<h1>，所以你需要什麼，以避免不良animation要麼改變你的風格，這

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>

h1 { 
    display: inline; 
    -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; 
}

block元素，這將在<h1>的默認block元素更改爲inline

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

這將在<h1>的默認block元件更改爲inline上hover，但除去其使得跳動（這將導致與所述第二個中的相同）

來源

2014-09-22 03:22:27 Kyojimaru

如何在轉換期間保持css元素不移動

回答

相關問題