duplicating a :hover transition using animation

dabblet.css

/* duplicating a :hover transition using animation */
article {border: 1px solid red; min-height: 100px;}
.transition {
  float: right;
  transition: all 250ms;
  padding-top: 20px;
  opacity: 0;
}
article:hover .transition {
  opacity: 1;
  padding-top: 0;
 }
.anim {
  float: right;
  animation: hide 250ms forwards;
  padding-top: 20px;
  opacity: 0;
}
article:hover .anim {animation: show 250ms forwards;}
@keyframes hide {
  0% {padding-top: 0; opacity: 1;}
  100% {padding-top: 20px; opacity: 0;}
}
@keyframes show {
  0% {padding-top: 20px; opacity: 0;}
  100% {padding-top: 0; opacity: 1;}
}

dabblet.html

<article>
<menu class="transition"><a>A transitioning link</a></menu>
</article>

<article>
<menu class="anim"><a>An animating link</a></menu>
</article>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}