<p>Starting frame is not set:</p>
<div class="square-1 square" data-animation-name="animate-1"></div>
<p>Ending frame is not set:</p>
<div class="square-2 square" data-animation-name="animate-2"></div>
<button>Click here</button>

* {
  font-family: monospace;
}

body {
  background-color: #e3e3e3
}

.square {
  width: 50px;
  height: 50px;
}

.square-1 {
  background-color: #d35400;
}

.square-2 {
  background-color: #3498db;
}

.animate-1 {
  animation-name: anim-without-start;
  animation-duration: 3s;
}

.animate-2 {
  animation-name: anim-without-end;
  animation-duration: 3s;
}

button {
  font-size: 1.1em;
  margin-top: 20px;
}

@keyframes anim-without-start {
  to {
    width: 100%;
  }
}

@keyframes anim-without-end {
  50% {
    width: 100%;
  }
}

$(document).ready(function() {
  
  $("button").click(function(event) {
    $(".square").trigger('click');
  });
  
  $(".square").click(function(event) {
    var element = $(event.currentTarget);
    element.toggleClass(element.attr("data-animation-name"), false);
    setTimeout(function(){
      element.toggleClass(element.attr("data-animation-name"), true);
    }, 20);
  });
  
});