Different transition on remove class - html

Question

Below is the code what I have tried. What I need is when the class get removed after 5s. The notification box should not move up. Just get fade out at same place.
This can be done by adding one more class in setTimeout. I am looking to avoid that.
$('.notify').click(function() {
$('.note').addClass('show');
setTimeout(function() {
$('.note').removeClass('show');
}, 5000);
})
.note {
top: 0%;
width: 300px;
position: fixed;
background: #ccc;
padding: 10px;
left: 50%;
height: 100px;
margin: -50px 0 0 -150px;
opacity: 0;
transition: top 1s, opacity 1.5s;
}
.show {
top: 50%;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="notify">click here</button>
<div class="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Answer 1

Use delay in transition: top 1s 1.5s, opacity 1.5s; and add transition: top 1s,opacity 1.5s; in .show class
$('.notify').click(function() {
$('.note').addClass('show');
setTimeout(function() {
$('.note').removeClass('show');
}, 5000);
})
.note {
top: 0%;
width: 300px;
position: fixed;
background: #ccc;
padding: 10px;
left: 50%;
height: 100px;
margin: -50px 0 0 -150px;
opacity: 0;
transition: top 1s 1.5s, opacity 1.5s;
}
.show {
top: 50%;
opacity: 1;
transition: top 1s,opacity 1.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="notify">click here</button>
<div class="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Answer 2

You can also do it pure CSS with the :target selector and simple animation:
#note {
width: 300px;
position: fixed;
top: 0;
left: 50%;
background: #ccc;
padding: 10px;
height: 100px;
margin: -50px 0 0 -150px;
opacity: 0;
transition: all 1s;
}
#note:target {
top: 50%;
animation: fadeOut 6s forwards;
}
#keyframes fadeOut {
16.67%, 83.33% {opacity: 1}
100% {opacity: 0}
}
<button class="notify">click here</button>
<div id="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
But the only limitation is that it can only run once.