How to make CSS animation use the applied style from previous animation -

i making checkbox thing, , have animation when going unchecked checked.

i have set animation-fill-mode: forwards css state applied after first animation initialized on check. how can next animation go state. reads specified in css file initial state, not 1 applied first animation. if set from { ... } on second animation animation (meant played on checked unchecked) plays on page load because plays on unchecked initial state.

input[type="checkbox"] {     display: none; }  input[type="checkbox"]:checked + .outer_checkbox  {          -webkit-animation-name: checked_color;        }  input[type="checkbox"]:checked + .outer_checkbox > .inner_checkbox {     -webkit-animation-name: checked_placement;       }  .inner_checkbox, .outer_checkbox {     border: 1px solid black;    -webkit-animation-duration: 0.3s;    -webkit-animation-fill-mode: forwards; }  .outer_checkbox {     cursor: pointer;     width: 32px;     height: 16px;      border-radius: 8px;          background-color: grey;      -webkit-animation-name: unchecked_color;  }  .inner_checkbox {     width: 18px;     height: 18px;     border-radius: 9px;        margin: -2px;          background-color: white;      -webkit-animation-name: unchecked_placement;        }  @-webkit-keyframes checked_color {     {         background-color: green;     } }  @-webkit-keyframes checked_placement {       {         margin-left: 14px;     } }  @-webkit-keyframes unchecked_color {     {         background-color: grey;     } }  @-webkit-keyframes unchecked_placement {       {         margin-left: -2px;     } } 

https://jsfiddle.net/sg86n25l/1/