Animation and Transition

HTML

<body>
  <h1 id="animationR">Animation</h1>
  <h1 id="transitionR">Transition</h1>

</body>

CSS

#transitionR {
  margin-left: 0em;
  transition: margin-left 2s ease-in;
}

#transitionR:hover {
  margin-left: 2em;
}

#animationR {
  margin-left: 0em;
}

.animationR-hover {
  animation: 2s ease-in slideRight forwards;
}

@keyframes slideRight {
  from {
    margin-left: 0em;
  }
  to {
    margin-left: 2em;
  }
}

JavaScript

$('#animationR').mouseenter(function() {
  $(this).addClass('animationR-hover');
})