Ben Scmidth Ben Scmidth - 4 months ago 13
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>
<html>
<head>
<style>


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

-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-transform:rotate(90deg);}

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

@keyframes mymove {
from {left: 0px;}
to {left: 20px;}
}
</style>
</head>
<body>

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

</body>
</html>




Answer

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