CSS中transition屬性不起作用怎么辦

小編給大家分享一下CSS中transition屬性不起作用怎么辦，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　我們先來看一下CSS中transition屬性不起作用的原因

　　transition是一種允許您指定更改時間等的屬性。

　　當用于設置鼠標光標放在按鈕上時顏色和大小更改的時間時，它可以有像動畫一樣的效果。

　　transition格式如下

　　選擇器名稱{

　　transition-property：value;

　　}

　　可指定的值是：

　　all：您可以指定適用于轉換的所有屬性。

　　none：沒有屬性發生變化。

　　屬性名稱：指定要應用轉換的屬性名稱。可以通過逗號指定多個。

　　transition不起作用的許多原因通常是描述懸停事件的轉換，所以要多加注意

　　因為可以實現動畫運動，所以有些效果使用transition屬性很容易實現。

　　下面我們來看看transition屬性的具體用法

　　如上述所說，不要在懸停事件中使用transition屬性。

　　HTML

　　<p>文字內容</p>

　　<p>文字內容</p>

　　<p>文字內容</p>

　　<p>文字內容</p>

　　<p>文字內容</p>

　　<p>文字內容</p>

　　CSS

　　p{

　　width:100px;

　　background-color:red;

　　transition-duration:2s;

　　transition-property:width;

　　}

　　p:hover{

　　width:420px;

　　background-color:blue;

　　}

　　p標簽中指定了width:100px和background-color:red;這樣的話當寬度是100px時，背景是紅色。下面指定了transition-duration:2s;

　　這樣的話，transtion實現的效果從開始到結束的時間是2秒。

　　最后是transition-property:width;應用transition屬性的效果僅為width。

　　：hover中指定width:420px和background-color:blue,這樣，移動鼠標到上面的時候，寬度變為420px，背景變為藍色。

　　如果鼠標懸停，寬度將為420px，背景將為藍色，但過渡效果僅為寬度。2秒的變化只有寬度。由于轉換效果不適用于指定背景顏色，因此只要將鼠標懸停在上面，它就會變為藍色。

看完了這篇文章，相信你對“CSS中transition屬性不起作用怎么辦”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！