Анимация CSS не воспроизводится плавно

у меня есть элемент <button>, который я хочу, когда этот элемент нажат, кнопка сдвинуться вниз на 200 пикселей

используя этот код в событии onclick кнопки, чтобы добавить класс, поэтому анимация будет работать:

JS

function anime() {
    var element = document.getElementById("tagd");
    element.classList.toggle("visible");    
}

HTML

<button onclick = "anime()" id = "tagd">

CSS

.visible {
    -webkit-animation: myfirst 5s 2; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: normal; /* Safari 4.0 - 8.0 */
    animation: myfirst 5s 2;
    animation-direction: normal;
    position: relative;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    0%   {top: 0px;}
    25%  {top: 50px;}
    50%  {top: 100px;}
    75%  {top: 150px;}
    100% {top: 200px;}
} 

@keyframes myfirst {
    0%   {top: 0px;}
    25%  {top: 50px;}
    50%  {top: 100px;}
    75%  {top: 150px;}
    100% {top: 200px;}
}

Итак, проблема в следующем:

• Анимация идет вниз, затем возвращается в первую позицию.
• Анимация не воспроизводится плавно (если вы запустите ее, вы увидите, что она воспроизводится шаг за шагом не плавно)