Revision control
Copy as Markdown
<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>