css transtion不生效_CSS中transition属性不起作用的原因及解决方法

CSS中的transition属性可用于调整元素更改的时间，它可以像动画一样显示。虽然transition属性可以很方便的实现过渡效果，但是有时候可能会出现无效的情况，所以我们就需要来理解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 transtion不生效_CSS中transition属性不起作用的原因及解决方法相关推荐

html z-index 设置无效,css z-index属性不起作用的原因及解决方法
在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed. 1.第一种情况 ...
html设置margin无效,CSS中margin不起作用的原因及解决方法
margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因对于初学者来说,可能会经 ...
php垂直对齐,CSS垂直对齐不起作用的原因及解决方法
verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因我想很多人都会 ...
扫描仪图标无法显示计算机,win7“我的电脑”中不显示扫描仪和摄像头的原因和解决方法...
安装win7旗舰版系统后,点击打开"我的电脑"发现不显示扫描仪和摄像头图标,那么扫描仪和摄像头去哪里了呢?起初以为驱动没装好,但经过仔细研究,终于找到win7"我的电脑& ...
VsStudio中scanf返回值被忽略的原因及其解决方法
相信有不少人在使用vs的时候会遇到以下这个问题:scanf返回值被忽略,接下来我就告诉大家该如何解决这个问题出现问题的原因: 因为scanf()在读取数据时不检查边界,所以可能会造成内存泄漏.M ...
Windows 技术篇：cmd使用过程中输入字母突然不显示光标的原因与解决方法
先说下光标消失的原因: 我们假设光标闪烁显示与不显示是两个状态,分别是通过(光标显示事件)和(光标隐藏事件)控制的. 中文输入过程中是没有光标的,此时直接按 ctrl+shift 切换输入法,系统没有 ...
在jQuery中，a标签trigger触发click不起作用的原因和解决方法
最近在项目中发现,用jq的trigger无法触发a标签的click事件.我的代码如下: $('a').trigger('click') 查阅资料发现: jquery trigger把(type === ...
计算机里面的文件打不开,exe是什么文件？电脑中exe文件打不开的原因及解决方法...
在电脑中,.exe是比较常见的文件格式,但是很多朋友不知道exe是什么文件,接下来这篇文章就将为大家介绍,并且还会附带exe文件打不开的解决方法,希望对大家有所帮助. 1."EXE File ...
css设置title字体_CSS中简写属性要注意TRouBLe的顺序，避免踩坑
简写属性是用于同时给多个属性赋值的属性.比如font是一个简写属性,可以用于设置多种字体属性.它指定了font-style.font-weight.font-size.font-height以及fon ...

css transtion不生效_CSS中transition属性不起作用的原因及解决方法

css transtion不生效_CSS中transition属性不起作用的原因及解决方法相关推荐

最新文章

热门文章