javascript - Seamlessly transition back and forth with only one animation class? -

i want use 1 class trigger animation, , upon removal of class redo animation in reverse.

it's hard visualize, i've created codepen of i'm @ currently.

you'll notice when .zoom removed #box, #box vanishes. doesn't animation in reverse, goal.

how can seamlessly transition , forth, 1 animation class? might use transitions, can't transition transforms.

try adding .zoomout class , css animations , utilizing .removeclass() , second class @ .toggleclass()

window.onclick = function() {    if (!$("#box").is(".zoom")) {      $("#box").removeclass("zoomout")        .toggleclass("zoom");    } else {      $("#box").toggleclass("zoom zoomout");    }  };

#box {    width: 256px;    height: 256px;    background: black;    opacity: 0;    display: block;    transform: scale(1.15, 1.15);    margin: 16px 0px;  }  .zoom {    animation: zoom 500ms;    animation-fill-mode: both;    -moz-animation: zoom 500ms;    -moz-animation-fill-mode: both;    -webkit-animation: zoom 500ms;    -webkit-animation-fill-mode: both;  }  .zoomout {    animation: zoomout 500ms;    animation-fill-mode: both;    -moz-animation: zoomout 500ms;    -moz-animation-fill-mode: both;    -webkit-animation: zoomout 500ms;    -webkit-animation-fill-mode: both;  }  @keyframes zoom {    0% {      opacity: 0;      transform: scale(1.15);    }    100% {      opacity: 1;      transform: scale(1);    }  }  @-moz-keyframes zoom {    0% {      opacity: 0;      transform: scale(1.15);    }    100% {      opacity: 1;      transform: scale(1);    }  }  @-webkit-keyframes zoom {    0% {      opacity: 0;      transform: scale(1.15);    }    100% {      opacity: 1;      transform: scale(1);    }  }  @keyframes zoomout {    0% {      opacity: 1;      transform: scale(1.15);    }    100% {      opacity: 0;      transform: scale(1);    }  }  @-moz-keyframes zoomout {    0% {      opacity: 1;      transform: scale(1.15);    }    100% {      opacity: 0;      transform: scale(1);    }  }  @-webkit-keyframes zoomout {    0% {      opacity: 1;      transform: scale(1.15);    }    100% {      opacity: 0;      transform: scale(1);    }  }  body {    margin: 0;    text-align: center;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -60%);    -moz-transform: translate(-50%, -60%);    -webkit-transform: translate(-50%, -60%);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>  <div id="box"></div>  click document toggle box.

codepen http://codepen.io/anon/pen/voxxke