Ben Scmidth Ben Scmidth - 1 year ago 129
HTML Question

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

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?

Please find the code below.

enter image description here

<!DOCTYPE html>

div {

background: transparent;
position: relative;

-webkit-animation: mymove 3s infinite;
-webkit-animation-timing-function: linear;
animation: mymove 1.2s infinite;
animation-timing-function: cubic-bezier(0.35, 0.53, 0, 1.59);


@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 20px;}

@keyframes mymove {
from {left: 0px;}
to {left: 20px;}

<div align="center">
<img src="arrowup.png" style="width:30px; height:30px;">


Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download