CSS scale in and out breaking - css

Question

I have a DIV that I want to scale in when I click a button and scale out when I click the DIV itself. I have the scale in part working great, but when I try and remove the fadeIn class when I scale out my animation fadeOut breaks.
Here is my fiddle
HTML
<button id="myBtn">Click Me</button>
<div id="animateBox" class="box"><div>
CSS
.box {
width: 200px;
height: 200px;
background-color:red;
visibility: hidden;
border-radius: 200px;
}
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
/* 60% {
transform: scale(0.4);
}
80% {
transform: scale(0.8);
opacity: 1;
} */
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
/* 60% {
-webkit-transform: scale(0.4);
}
80% {
-webkit-transform: scale(0.8);
opacity: 1;
} */
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.fadeOut {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: hidden;
}
#keyframes fadeOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
opacity: 0;
}
}
jQuery
$('#myBtn').click(function() {
$('#animateBox').addClass("fadeIn");
});
$('#animateBox').click(function() {
$( this ).addClass( "fadeOut" );
$( this ).removeClass( "fadeIn" );
});

Answer 1

Just modified Nasir's answer and referred this answer to make the animation smooth.
CSS
.box {
width: 200px;
height: 200px;
background-color:red;
visibility: hidden;
border-radius: 200px;
}
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
/* 60% {
-webkit-transform: scale(0.4);
}
80% {
-webkit-transform: scale(0.8);
opacity: 1;
} */
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.fadeOut {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode:forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation-fill-mode:forwards;
/*FF 5+*/
-o-animation-fill-mode:forwards;
/*Not implemented yet*/
-ms-animation-fill-mode:forwards;
/*IE 10+*/
animation-fill-mode:forwards;
/*when the spec is finished*/
visibility:visible;
}
#keyframes fadeOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
#-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0);
}
}
Working Fiddle

Answer 2

try this .
everything is fine but in the css i have changed for you take a look ....
.box {
width: 200px;
height: 200px;
background-color:red;
visibility: hidden;
border-radius: 200px;
}
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
/* 60% {
transform: scale(0.4);
}
80% {
transform: scale(0.8);
opacity: 1;
} */
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
/* 60% {
-webkit-transform: scale(0.4);
}
80% {
-webkit-transform: scale(0.8);
opacity: 1;
} */
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.fadeOut{
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.75s;
-webkit-animation-duration: 0.75s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility:visible
}
#keyframes fadeOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.5);
opacity: 1;
}
}
#-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
opacity: 1;
}
}