CSS中transition属性不起作用的缘由及解决办法
我们先来看一下CSS中transition属性不起作用的缘由
transition是一种允许您指定更改工夫等的属性。
当用于设定鼠标光标放在按钮上时色彩和大小更改的工夫时,它可以有像动画同样的结果。
transition格局如下
选中器名称{ transition-property:value; }
可指定的值是:
all:您可以指定适用于转换的所有属性。
none:没有属性产生变化。
属性名称:指定要利用转换的属性名称。可以通过逗号指定多个。
transition不起作用的很多缘由平常是描述悬停事件的转换,所以要多加注意
由于可以实现动画运动,所以有些结果运用transition属性很容易实现。
下面我们来看看transition属性的概括用途
如上述所说,不要在悬停事件中运用transition属性。
HTML
文字内容
文字内容
文字内容
文字内容
文字内容
文字内容
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属性不起作用的缘由及解决办法的细致内容,更多请关注 百分百源码网 其它相干文章!