My transitions out are not working - html

Question

My transition outs are not working, I am using the latest Chrome Browser and when I hover over the button, the transition in is working, however the transition out just cuts right off.
My CSS
.btn{
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active{
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue{
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue:hover{
background-color: #6FC6FF;
transition-duration: .02s;
display: inline-block;
}
}
HTML is on this JSFiddle.

Answer 1

You need to put the transition on the base state not the :hover then it will transition between all states.
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.btn {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.blue:hover {
background-color: #6FC6FF;
display: inline-block;
}
<div id="buttons"> Blu
</div>

Answer 2

You are adding a transition to the :hover state, not to the actual element.
It's usually better to define a transition on the element itself, and then change properties to it's states, this way it understands that whatever the state change, it should transition from one to the other.
.btn{
transition: background-color 0.2s ease-out;
}
.btn:active{
...
}
.btn:hover{
...
}

Answer 3

Your just need to insert this on your btn main class
.btn{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}