I can't figure out why some people mention property name in shorthand transition while it will be the same if they don't do that.
Lets say there is a button that I want to change its background
.btn{
padding: 10px;
border-radius: 5px;
background: #fff;
border: none;
outline: none;
cursor: pointer;
transition: .3s;
}
.btn:hover{
background: #ddd;
}
transition: background .3s; and transition: .3s; have the same result but why some people mention background ? Does it affect the performance ?
while it will be the same if they don't do that.
No it's not the same. A trivial example:
.box {
background:red;
display:inline-block;
width:100px;
height:100px;
transform:scale(1);
}
.box:hover {
transform:scale(1.5);
background:green;
}
<div class="box" style="transition:0.3s;"></div>
<div class="box" style="transition:background 0.3s;"></div>
They only have the same result if we consider background but the first one cover all the properties and in many cases we don't need to transition all the properties but rather specific ones.
Related: What is the difference between transition-all and transition in TailwindCSS