CSS過渡不行

Question

這是我的代碼：

.pic { 
 
    width: 150px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
    margin: auto; 
 
    border: 2px white solid; 
 
    box-shadow: 0px 0px 0px 1px #E0DDDD; 
 
    transition: 1s; 
 
} 
 
.pic img:hover { 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: 1s; 
 
    transition-timing-function: ease-in-out; 
 
    border: 2px red solid; 
 
} 
 
.pic img { 
 
    transition: 1s; 
 
}

<div class="pic"> 
 
    <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro"> 
 
</div>

爲什麼不是在我的代碼工作的過渡，並可以做什麼來解決這個問題？

Answer 1

有你的代碼的幾個問題：

• 您還沒有定義，你想過渡什麼。你剛剛說過transition:1s;，它告訴瀏覽器......什麼都沒有。如果你想要改變圖像的不透明度，你可以寫transition:opacity 1s;。
• 將轉換代碼放置在轉換不會運行的元素上。然後，只需更改要轉換的屬性，然後瀏覽器就可以完成其餘的任務。

這裏的工作演示：https://jsfiddle.net/q3nj9n54/

另外，請閱讀this。

編輯：

@阿里-B現在，我知道你想之間（寬度和高度）過渡一下，應該更容易，使這項工作。

• 要爲多個屬性設置動畫，您需要在transition屬性中用逗號分隔它們。
• 此外，此刻，你已經定義的寬度和高度屬性是.pic元素，不圖像 - 這是至關重要的是，要設置動畫的值上右鍵屬性：P
• 在那張紙上，你會想.pic爲大比150px乘150px，否則在轉換過程中不會有任何變化 - 圖像已經在100％100％。
• 您仍然需要將轉換代碼放在圖像上之前它的懸停 - 在懸停時，您只需要更改寬度和高度。

這裏的寬度和高度之間轉變的另一小提琴：https://jsfiddle.net/2j423dn5/

編輯：

現在我得到你想要的東西：d

我是動畫的錯誤的元素。

這會解決你的問題：https://jsfiddle.net/2j423dn5/2/

Answer 2

你transition代碼是有點偏離，需要一些修正。

我不太確定你想要添加實際的轉換，所以我在img或其容器上添加了代碼，以便你有一些選擇。

transition CSS屬性是所有transition屬性，如持續時間，屬性和樣式。

我也不相信，CSS過渡不需要任何瀏覽器前綴（See here on CanIUse.com）

歸根結底，它只是不正確的語法的一點點，而遺漏部分的過渡講述Toastrackenigma的回答全部都是真實的它需要運行哪些元素。

.pic { 
 
    width: 150px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
    margin: auto; 
 
    border: 2px white solid; 
 
    box-shadow: 0px 0px 0px 1px #E0DDDD; 
 
    transition: 1s all ease-in-out; 
 
    box-sizing: border-box; 
 
} 
 
.pic img { 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    transition: 1s all ease-in-out; 
 
} 
 
.pic.on_pic:hover { 
 
    border: 2px red solid; 
 
} 
 
.pic.on_img img:hover { 
 
    border: 2px red solid; 
 
} 
 
.pic.to_size:hover { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 2px red solid; 
 
}

<div class="pic on_pic"> 
 
    <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro"> 
 
</div> 
 

 
<div class="pic on_img"> 
 
    <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro"> 
 
</div> 
 

 
<div class="pic to_size"> 
 
    <img src="http://lorempixel.com/300/300/city/" alt="VBpro" title="VBpro"> 
 
</div>

在下面的評論是針對OP最後的固定問題，但在這裏它是爲別人而不必通過大量的評論拖網。

• JSFiddle