在悬停中应用CSS过渡属性而不是在正常状态下有什么区别?

前端之家收集整理的这篇文章主要介绍了在悬停中应用CSS过渡属性而不是在正常状态下有什么区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在学习CSS3.现在,我在w3schools网站上看到的是:

CSS

#ID {
  transition: transform 3s;
}

#ID:hover {
  transform: rotateX(20deg);
}

而我所做的就是:

CSS:

#ID:hover {
  transform: rotateX(20deg);
  transition: transform 3s;
}

两者都有效.所以,问题是:我可以将转换和任何转换属性放在同一个选择器中吗?或者这不是正确的方法

解决方法

简短的回答:

如果在element:hover中定义过渡属性,则只会在该状态下应用它.

说明:

无论您在element中定义哪个CSS属性:hover仅在元素处于悬停状态时应用,而您在元素中定义的任何CSS属性都将应用于两种状态.

在正常状态下声明的Transition属性

查看元素状态更改时转换是如何运行的.当您停止悬停元素时,它仍将使转换回到正常状态.

代码链:

#ID {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: royalblue;
  transition: transform 1s;
}
#ID:hover {
  transform: rotateX(60deg);
}
<div id="ID"></div>

在悬停状态中声明的过渡属性

查看停止悬停元素时转换如何中断,并立即跳转到正常状态.

代码链:

#ID {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: royalblue;
}
#ID:hover {
  transition: transform 1s;
  transform: rotateX(60deg);
}
<div id="ID"></div>
原文链接:https://www.f2er.com/css/217680.html

猜你在找的CSS相关文章