在悬停中应用CSS transition属性而不是在其正常状态下有什么区别？ [英] What is the difference between applying CSS transition property in hover rather than in its normal state?

问题描述

我在学习CSS3。现在，我在w3schools网站上看到的是：

CSS

  #ID {
 transition：transform 3s; 
} 
 #ID：hover {
 transform：rotateX（20deg）; 
} 
  

我所做的是：

CSS ：

  #ID：hover {
 transform： rotateX（20deg）; 
 transition：transform 3s; 
} 
  

两者都工作。因此，问题是：我可以同时将转换和任何转换属性放在同一个选择器中吗？

解决方案

简短答案：

如果您在 element：hover 中定义转换属性，

在元素中定义的任何CSS属性：hover 只会在仅适用悬停状态，而在元素中定义的任何CSS属性将应用于两种状态。

---

在正常状态下声明的转换属性：

看看当元素的状态改变时，转换是如何运行的。

CODE SNIPPET：

  #ID {width：100px; height：100px; margin：0 auto;背景颜色：royalblue; transition：transform 1s;}＃ID：hover {transform：rotateX（60deg）;}  

 < div id =ID>< / div>  

$ b

---

在悬停状态下声明的转换属性：

查看停止悬停元素时转换是如何中断的，它会立即跳转到正常状态。

CODE SNIPPET：

  #ID {width：100px; height：100px; margin：0 auto; background-color：royalblue;}＃ID：hover {transition：transform 1s; transform：rotateX（60deg）;}  

 < div id =ID>< / div>  

I'm learning CSS3. Now, what I've seen in w3schools website is that:

CSS

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

And what I did is this:

CSS:

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

Both are working. So, the question is: Can I put both transition and any transformation property in same selector? Or is it not the right way?

解决方案

SHORT ANSWER:

If you define your transition property in element:hover, it will only get applied in that state.

---

EXPLANATION:

Whichever CSS properties you define in element:hover will only be applied when the element is in the hover state, whereas whichever CSS properties you define in your element will be applied in both states.

---

Transition property declared in normal state:

See how the transition always runs when the element's state is changed. When you stop hovering the element it will still make the transition back to its normal state.

CODE SNIPPET:

#ID {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: royalblue;
  transition: transform 1s;
}
#ID:hover {
  transform: rotateX(60deg);
}

<div id="ID"></div>

---

Transition property declared in hovered state:

See how the transition breaks when you stop hovering the element and it jumps to its normal state immediately.

CODE SNIPPET:

#ID {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: royalblue;
}
#ID:hover {
  transition: transform 1s;
  transform: rotateX(60deg);
}

<div id="ID"></div>

这篇关于在悬停中应用CSS transition属性而不是在其正常状态下有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！