smooth text movement on casparcg html template

I've created an html template to slide a text from left to right. I've used css to animate the text. the result in the browser(firefox, chrome, ...) is good but when I want to play the template on casparCG the result is not good becuase the movement of the text is not smooth and shakes while moving. What causes this problem? If anyone has an idea?

Thanks

below is the source of my html template:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    html {
        background-color: transparent;
        box-sizing: border-box;
        overflow: hidden;
        font-family: IRIBSahand, Tahoma, Geneva, sans-serif;
        font-size: 4vw;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

    @keyframes slide {
        from { right: 100%;}
        to { right: -100%;}
    }
    @-webkit-keyframes slide {
        from { right: 100%;}
        to { right: -100%;}
    }

    #marquee { 
        width: 88vw;
        overflow:hidden;
        position: absolute;
        bottom: 0vmax;
        height: 8vw;
        line-height: 6vw;
        font-size: 0.35rem;
        color: #16354d;
        font-family: IRIBSahandBold;
        font-weight: bold;
        background-color: white;
        direction: rtl;
        margin-left: 6vw;
    }

    #text {
        position:absolute;
        top:0;
        right:0;
        width:3500px;
        height: 8vw;
        font-size: 0.35rem;
        animation-name: slide;
        animation-duration: 30s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: slide;
        -webkit-animation-duration: 30s;
        -webkit-animation-timing-function:linear;
        -webkit-animation-iteration-count: infinite;
    }

    </style>
</head>
<body>

<div id="marquee">
    <div id="text">متن زیرنویس در این قسمت وارد می شود. این یک متن آزمایشی لست</div>
</div>

</body>
</html>

CasparCG server config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <paths>
    <media-path>media\</media-path>
    <log-path>log\</log-path>
    <data-path>data\</data-path>
    <template-path>templates\</template-path>
    <thumbnails-path>thumbnails\</thumbnails-path>
  </paths>
  <channels>
    <channel>
        <video-mode>1080p2500</video-mode>
        <consumers>
          <screen>
            <device>1</device>
          </screen>
          <system-audio />
        </consumers>
    </channel>
  </channels>
  <controllers>
    <tcp>
        <port>5250</port>
        <protocol>AMCP</protocol>
    </tcp>
  </controllers>
</configuration>

CasparCG / help

smooth text movement on casparcg html template #44