CSS Transitions Question

HTML-CSS
1

Hey guys, can anyone explain the difference in the output of these two code snippets (besides the fact that one refers to a button element):

#form > button:hover {
  background-color: orange;
  transition: background-color 0.3s;
}

#form input[type="submit"]:hover {
	background-color: orange;
	transition-duration: 0.3s;
}

Thanks!

2

The first is using the transition shorthand property and is explicitly setting the transition-property to the background-color property and also sets a duration, leaving the rest implicit (default values).

The second is explicitly setting the transition-duration property and leaving the rest implicit (default values).

The most noticeable difference between the two is the latter is implicitly setting the transition-property to all which is something you typically want to avoid doing.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.