Can I add a time interval to this animated easing css?

Question

I have created an easing css but I will change it to "bottom up" direction. The problem is, I need to make it like moving twice and stop for a sec, then move again for twice and stop for a sec, and such repetition. I wanna add it on my website as the back to top button. Currently the button keeps moving. and as I said, I wanna make it move for twice, and stop for a sec and continue. Anyone knows?

Answer 1

You can comfortably play around with the percentage setting.

Simple example:

@keyframes mymove {
    0% {left: 0px;}
    20% {left: 20px;}
    40% {left: 0px;}
    60% {left: 20px;}
    100% {left: 20px;}
}

See this fiddle