Revision control
++ <svg xmlns="http://www.w3.org/2000/svg" width="350" height="150">
++ <style>
++ @keyframes translate {
++ 0% {transform: translate(0, 0);}
++ 100% {transform: translate(250px, 0);}
++ }
++ @keyframes translate2 {
++ 0% {transform: translate(0, 0); animation-timing-function: linear;}
++ 100% {transform: translate(250px, 0);}
++ }
++ #dot1 {
++ animation-duration: 500ms;
++ animation-name: translate;
++ animation-iteration-count: infinite;
++ }
++ #dot2 {
++ animation-duration: 500ms;
++ animation-name: translate2;
++ animation-iteration-count: infinite;
++ }
++ </style>
++ <defs>
++ <circle id="dot" r="15" fill="orange" stroke="grey" stroke-width="3"/>
++ </defs>
++ <use id="dot1" href="#dot" x="50" y="20"/>
++ <use id="dot2" href="#dot" x="50" y="100"/>
++ </svg>