CSS Smooth end of an animation - css

Question

I have made this loader bar. Is it possible that when I remove the class "animate" to wait the animation to end?
Or just make the bar fade out (it should now but the animation stops).
I thought to let the animation run continuously and fade the bar's colours but i don't like to leave an animation always running....
I don't really like that it just disappears :(
$("#btn").click(function() {
$(".loadBar").addClass("animate");
setTimeout(function() {
$(".loadBar").removeClass("animate");
}, 5000)
})
#btn {
margin-top: 50px;
}
.loadBar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: transparent;
z-index: 4;
opacity: 0;
-moz-transition: opacity ease-in 1s;
-o-transition: opacity ease-in 1s;
-webkit-transition: opacity ease-in 1s;
transition: opacity ease-in 1s;
}
.loadBar .bar {
content: "";
display: inline;
position: absolute;
width: 0;
height: 100%;
left: 50%;
text-align: center;
-moz-transition: left 2s 2s;
-o-transition: left 2s 2s;
-webkit-transition: left 2s 2s;
transition: left 2s 2s;
}
.loadBar .bar:nth-child(1) {
background-color: #4183D7;
}
.loadBar .bar:nth-child(2) {
background-color: #FFF;
}
.loadBar .bar:nth-child(3) {
background-color: #FFF;
}
.loadBar.animate .bar {
-moz-transition: left 0s 0s;
-o-transition: left 0s 0s;
-webkit-transition: left 0s 0s;
transition: left 0s 0s;
}
.loadBar.animate .bar:nth-child(1) {
-moz-animation: loading 1.5s infinite;
-o-animation: loading 1.5s infinite;
-webkit-animation: loading 1.5s infinite;
animation: loading 1.5s infinite;
}
.loadBar.animate .bar:nth-child(2) {
-moz-animation: loading 1.5s 0.5s infinite;
-o-animation: loading 1.5s 0.5s infinite;
-webkit-animation: loading 1.5s 0.5s infinite;
animation: loading 1.5s 0.5s infinite;
}
.loadBar.animate .bar:nth-child(3) {
/* -moz-animation : loading 3s linear 2s infinite;
-o-animation : loading 3s linear 2s infinite;
-webkit-animation: loading 3s linear 2s infinite;
animation : loading 3s linear 2s infinite;*/
}
.loadBar.animate {
opacity: 1;
}
#-moz-keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
#-webkit-keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
#keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loadBar">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<button id="btn">Show loadbar</button>

Answer 1

Well currently your animation doesnt end...
animation: loading 1.5s 0.5s infinite;
so lets fix that by making it iterate 1 time:
animation: loading 1.5s 0s 1;
Because its one iteration and no delay the overall animation runtime is 1500ms...so you set the timeout to 1500ms like so...
EDIT: Because you also specified (in the comments to this answer) that you would want the animation to continue until ajax has loaded I have amended my code to do so
$("#btn").click(function() {
doajax();
})
function doajax() {
$(".loadBar").addClass("animate");
//every 1500ms check if ajax has done loading
setInterval(function() {
if ($(".loadBar").hadClass("page-loaded")) {
$(".loadBar").removeClass("animate");
}
}, 1500);
$.ajax({
url: "http://www.mypage/",
type: "POST",
data: "",
success: function(data) {
$(".loadBar").addClass("page-loaded");
}
});
}
#btn {
margin-top: 50px;
}
.loadBar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: transparent;
z-index: 4;
opacity: 0;
-moz-transition: opacity ease-in 1s;
-o-transition: opacity ease-in 1s;
-webkit-transition: opacity ease-in 1s;
transition: opacity ease-in 1s;
}
.loadBar .bar {
content: "";
display: inline;
position: absolute;
width: 0;
height: 100%;
left: 50%;
text-align: center;
-moz-transition: left 2s 2s;
-o-transition: left 2s 2s;
-webkit-transition: left 2s 2s;
transition: left 2s 2s;
}
.loadBar .bar:nth-child(1) {
background-color: #4183D7;
}
.loadBar .bar:nth-child(2) {
background-color: #FFF;
}
.loadBar .bar:nth-child(3) {
background-color: #FFF;
}
.loadBar.animate .bar {
-moz-transition: left 0s 0s;
-o-transition: left 0s 0s;
-webkit-transition: left 0s 0s;
transition: left 0s 0s;
}
.loadBar.animate .bar:nth-child(1) {
-moz-animation: loading 1.5s 2;
-o-animation: loading 1.5s 2;
-webkit-animation: loading 1.5s 2;
animation: loading 1.5s 2;
}
.loadBar.animate .bar:nth-child(2) {
-moz-animation: loading 1.5s 0.5s 2;
-o-animation: loading 1.5s 0.5s 2;
-webkit-animation: loading 1.5s 0.5s 2;
animation: loading 1.5s 0.5s 2;
}
.loadBar.animate .bar:nth-child(3) {
/* -moz-animation : loading 3s linear 2s infinite;
-o-animation : loading 3s linear 2s infinite;
-webkit-animation: loading 3s linear 2s infinite;
animation : loading 3s linear 2s infinite;*/
}
.loadBar.animate {
opacity: 1;
}
#-moz-keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
#-webkit-keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
#keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loadBar">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<button id="btn">Show loadbar</button>