I am trying to trigger my keyframe animations when the .show class for the popup window is added through JS, but currently the animation only activates upon page load.
This is the JavaScript code I have:
<script type="text/javascript">
$(document).ready(function() {
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
return false;
});
$("#closemodal").click(function() {
$("div#simpleModal").removeClass("show");
return false;
});
});
</script>
My CSS Styles:
@-webkit-keyframes editwindow {
0% { -webkit-transform: scale3d(2.5, 2.5, 1); opacity: 0; }
100% { -webkit-transform: scale3d(1, 1, 1) }
}
div#simpleModal {
position: absolute;
top:25%;
left:25%;
width: 560px;
padding: 2px;
background: #495263;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: solid 1px #2b323a;
-moz-box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset;
-webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset;
box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset;
opacity: 0;
z-index: 0;
}
div#simpleModal.show {
opacity: 1.0;
z-index: 100;
-webkit-animation-name: editwindow;
-webkit-transition: all 0.2s ease-in-out;
-moz-animation-duration: 400ms;
-moz-animation-name: pop;
-moz-animation-timing-function: ease-in-out;
}
Is there a way to ensure that the animation is triggered when the show class is added?