Revision control
++ <svg xmlns="http://www.w3.org/2000/svg" width="400" height="150">
++ <style>
++ @keyframes translate {
++ 0% {transform: translate(0, 0);}
++ 49% {transform: translate(340px, 0);}
++ 100% {transform: translate(0, 0);}
++ }
++ #stepsEnd {
++ animation-duration: 1s;
++ animation-name: translate;
++ animation-iteration-count: infinite;
++ animation-timing-function: step-end;
++ }
++ #stepsStart {
++ animation-duration: 1s;
++ animation-name: translate;
++ animation-iteration-count: infinite;
++ animation-timing-function: step-start;
++ }
++ </style>
++ <defs>
++ <circle id="dot" r="15" fill="orange" stroke="grey" stroke-width="3"/>
++ </defs>
++ <use id="stepsEnd" href="#dot" x="30" y="20"/>
++ <use id="stepsStart" href="#dot" x="30" y="70"/>
++ </svg>