我们先来看一下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属性不起作用的缘由及解决方法的细致内容,更多请关注ki4网别的相干文章!