Transition duration not working on bootstrap button - css

Question

I am trying to add transition effect on some bootstrap buttons.
The problem is with height and width properties. These change straight away without considering the the transition duration property.
Note that all other properties change within described duration (2s in this case).
HTML
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
<button type="button" data-toggle="modal" data-target="#infoModal" class="btn btn-outline-warning mt-5 mb-3 3mr-3 ">Learn More</button>
</div>
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.btn-outline-warning {
border-color: white;
transition: all;
transition-duration: 2s;
}
.btn-outline-warning:hover {
border-color: rgb(255, 136, 0);
background-color: rgba(0,0,0,.5);
transform: rotate(20deg);
width: 300px;
height: 100px;
}
Here is my JSFiddle for more clarification and demonstration.
https://jsfiddle.net/p34mjfr5/11/

Answer 1

If you want to use transition on one of your css property you need to set default value on it first, then change it on hover. specially those propery that need size like px or etc.. width or height following this rule.
.btn-outline-warning {
border-color: white;
transition: 2s all ease;
width: 200px; /* default value */
height: 50px; /* default value */
}
.btn-outline-warning:hover {
border-color: rgb(255, 136, 0);
background-color: rgba(0, 0, 0, .5);
transform: rotate(20deg);
width: 300px;
height: 100px;
}
JSFiddle