Variable aus CSS in HTML nutzen?

[derSchweriner]

Hallo Leute,
gern würde ich Variable, die ich in CSS vergebe im HTML-Dokument nutzen.
Hier der Ansatz:

CSS:

#box { 
   position: absolute;   
   left: 0%; top: 75%;
	 height: auto; width: 90%;
	 background-color: rgba(255, 255, 255, 0.4);
}

@media only screen (min-width: 2000px) {   
   Hier sollte für die HTML-Anweisung:  
   <animate attributeName="x" from="100%" to=-160% dur='25s'  repeatCount='indefinite'/>  
   Variable mit Werten für to und dur stehen, die bei anderen Auflösungen verändert werden können.
}

@media only screen and (min-width: 1800px) and (max-width: 1999px) {   
   Hier müssen beide Werte abweichen, damit beim Betrachter der gleiche Effekt zu sehen ist.
}

HTML:

...  
 <div id="box"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="40px"> 
       <text x="0" y="30" style="font:20px Arial;"> +++ Hier steht ein recht langer Lauftext, der selbst bei hohen Auflösungen den Bildschirm ausfüllt. +++ 
	        <animate attributeName="x" from="100%" to=-160% dur='25s'  repeatCount='indefinite'/>  
       </text>   
    </svg>  
 </div>  

In der HTML-Datei müssen dann die aktuell zutreffenden Werten in to und dur eingesetzt werden.
Auch eine Variante, in der ich zuvor den tatsächlichen ViewPoint auslese und entsprechend dem Verhältnis die Größen der beiden Variable berechnen lasse, könnte ich mir vorstellen.

Hat jemand eine Idee, wie ich die beiden Werte in der HTML-Datei dynamisch halten kann?

Schon mal vielen Dank an euch!!!