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;}
}