svg moving text basic example

by IlyaB

HTML

<svg width="600px" height="200px" viewBox="0 0 600 200"
            version="1.1" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">

         <g id="labelGroup">                 
            <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x="0" y="0" width="129" height="20" r="0" rx="0" ry="0" fill="none" stroke="#1300bd" class="mapSvgItem mapSvgRect vehicleLabelRect"></rect>
    <text style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-size: 12px;" x="2" y="7" text-anchor="start" text="Buffalo shuttle - Driving" font="" stroke="none" fill="#1300bd" class="mapSvgItem vehicleLabelText" font-size="12px"><tspan dy="5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Buffalo shuttle - Driving</tspan></text>
            </g>    
     </svg>

CSS

#labelGroup {
     -webkit-animation: myfirst 10s; /* Chrome, Safari, Opera */
    animation: myfirst 10s; 
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from   {transform:translate3d(0px,0px,0px)}
    to {transform: translate3d(100px,100px,0px)}
}

/* Standard syntax */
@keyframes myfirst {
    from   {transform:translate3d(0px,0px,0px)}
    to {transform: translate3d(100px,100px,0px)}
}