1

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?

Ricky Ruiz
  • 25,455
  • 6
  • 44
  • 53
  • 1
    The first example is generally correct, as the transition timing is stated on the unaffected state. But that's based on the majority of examples I've seen of how to generate transitions on hover actions. – Lee Jul 06 '16 at 14:23

4 Answers4

9

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>
Ricky Ruiz
  • 25,455
  • 6
  • 44
  • 53
0

The first example is generally correct, as the transition timing is stated on the unaffected state. But that's based on the majority of examples I've seen of how to generate transitions on hover actions.

Lee
  • 4,187
  • 6
  • 25
  • 71
0

1st case :

All your transition in the #ID will have a transition of 3s. When you hover your #ID, your transformation is rotateX(20deg).

2nd case :

When you hover your #ID, you have a transition of 3s.

Overall :

All the transitions from the first css will have a duration of 3s. Then you can apply transitions on your #ID from different places. Whereas in your second case you separate them and if you want to have another transitions triggerd by something else than hover, you will have to specify the duration again.

Both are correct

Relisora
  • 1,163
  • 1
  • 15
  • 33
0

When a transition is specified for the :hover state, the transition won’t work on mouse out.

Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52