Animacja jeden raz, a odświeżanie zawartości

Mam taki problem z animacją w css. Wiadomo, że jak doda się klasę z animacją do tagu to animacja startuje. Ok tak ma być problem, że ja ustawiam animacje żeby wykonała się tylko raz lecz zawartość tagu z moją klasą się zmienia co jakiś czas no i niestety animacja rusza ponownie, jest na to sposób? Wyjaśnię dokładniej na kodzie:

Mam przykładową tabelkę:

<table>
  <tr id="rekord1" class="animacje">
    <td>lorem</td>
    <td>lorem</td>
  </tr>
  <tr id="rekord2" >
    <td>lorem</td>
    <td>lorem</td>
   </tr>
</table>

klasę animacje dodałem poprzez js i ruszyła animacja która ma trwać 3 sekundy lecz wcześniej po powiedzmy 2 sekundach okazało, się, że cały rekord1 ma być zmieniony i js podmienia wszystko wewnątrz </tr> no i w tym momecie animacja rusza ponownie... i nie nie mogę wcześniej usunąć klasy bo odświeżanie często jest cykliczne i animacja musi się wykonać... Dla większej jasności w tr pojawia się tło, które zanika. Jakiś pomysł?

Źle zrozumiałeś, animacja to zwykła animacja css3. A zawartość ma się zmieniać niezależnie. Tak naprawdę to właśnie zmiana jednej z wartości wpisywanych do rekordu warunkuje czy rekord ma się zanimować czy nie. Chciałem uniknąć animacji javascriptowych ale pewnie nie będę miał wyjścia...