javascript - CSS Animation Fill Mode - What have I done wrong? -

i need create rotation animation. click event spins element 180° point down. click event spins same element 0° point up.

i have animation-fill-mode set forwards preserve last keyframe state. not appear working. visual elements reset default state.

any ideas may doing wrong?

my codepen: http://codepen.io/simspace-dev/pen/rrpgmp

my code:

(function() {    $('#btnb').on('click', function(e) {      return $('.box').addclass('spin-counter-clockwise');    });    $('#btnf').on('click', function(e) {      return $('.box').addclass('spin-clockwise');    });    $('.box').on('webkitanimationend', function(e) {      return $(e.target).removeclass('spin-counter-clockwise').removeclass('spin-clockwise');    });  }.call(this));

.box {    background: red;    position: relative;    width: 176px;    height: 176px;    margin: 40px auto;    text-align: center;  }  .box .top {    background: green;    position: absolute;    top: 0;    width: 100%;    height: 28px;  }  .box .bottom {    background: purple;    position: absolute;    bottom: 0;    width: 100%;    height: 28px;  }  .box .caret {    color: white;    font-size: 88px;    position: absolute;    top: 42px;    left: 50px;  }  .spin-clockwise {    -moz-animation: spin 2s;    -webkit-animation: spin 2s;    -moz-animation-fill-mode: forwards;    -webkit-animation-fill-mode: forwards;  }  .spin-counter-clockwise {    -moz-animation: spin 2s reverse;    -webkit-animation: spin 2s reverse;    -moz-animation-fill-mode: forwards;    -webkit-animation-fill-mode: forwards;  }  @keyframes spin {    {      -webkit-transform: rotate(0deg);      transform: rotate(0deg);    }    {      -webkit-transform: rotate(180deg);      transform: rotate(180deg);    }  }  body {    text-align: center;    margin: 0 auto;  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <h2>keyframes not supported in ie9 , earlier</h2>    <div class="box">    <div class="top">top</div>    <div class="caret"><i class="fa fa-caret-square-o-up"></i>    </div>    <div class="bottom">bottom</div>  </div>    <p>    <button id="btnf">spin clockwise</button>  </p>  <p>    <button id="btnb">spin coutner clockwise</button>  </p>

so root issue class animation being removed.

i couldn't work using same keyframes, did create new keyframes counter clockwise, , removed opposite class when buttons clicked

changes:

css

.spin-clockwise {   -moz-animation: spin 2s;   -webkit-animation: spin 2s;  }  .spin-fill-mode {   -moz-animation-fill-mode: forwards;   -webkit-animation-fill-mode: forwards;   animation-fill-mode: forwards; }  .spin-counter-clockwise {   -moz-animation: spin-counter 2s;    -webkit-animation: spin-counter 2s;   }  @keyframes spin {   {     -webkit-transform: rotate(0deg);     transform: rotate(0deg);   }   {     -webkit-transform: rotate(180deg);     transform: rotate(180deg);   } }  @keyframes spin-counter {   {     -webkit-transform: rotate(180deg);     transform: rotate(180deg);   }   {     -webkit-transform: rotate(0deg);     transform: rotate(0deg);   } } 

js:

$('#btnb').on('click', (e)->   $('.box')     .addclass('spin-counter-clockwise')     .removeclass('spin-clockwise') )  $('#btnf').on('click', (e) ->   $('.box')     .addclass('spin-clockwise')     .removeclass('spin-counter-clockwise') ) 

and add class spin-fill-mode box. though leave fill-mode in animation classes... updated codepen:

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