title: CSS Right to Left @keyframes transform:-100% to transform none
body: <p>I facing difficulty finding what causing the problem. And I appreciate your help. In the website I have set the html text direction right to left because the website in Arabic. And there is css animation which all are running normal. Except in the following condition:
  When the html text direction is right to left and I'm browsing the website on mobile. Or using the device toggle option in google chrome. 
  When the page loads, it loads on the div which is set -100% to the left, instead of loading on the content and the div which is -100% comes to the mid on the page. And that gives the illusion that the whole web page is coming from the right. I don't know how to solve this for mobile devices I'm thinking of viewports but I couldn't find a solution.
  Here is the code for the webpage </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html dir="rtl" lang="ar" &gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;RTL TEST SITE&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .animated {
      animation-duration: 1s;
      animation-fill-mode: both;
  }
  
  @keyframes fadeInLeft {
    from {
      transform: translate3d(-100%, 0, 0);
    }
    to {
      transform: none;
    }
  }
  
  @keyframes fadeInRight {
    from {
      transform: translate3d(100%, 0, 0);
    }
    to {
      transform: none;
    }
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body class="rtl" &gt;
  
      &lt;div style="background:green;text-align:center;"&gt;
          &lt;a&gt;عنوان الصفحة&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;"&gt;
          &lt;h2&gt;كلمات باللغة العربية تأتي من جهة اليسار&lt;/h2&gt;
      &lt;/div&gt;
  
      &lt;p&gt;فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة &lt;/p&gt;
  
      &lt;div class="fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;"&gt;
          &lt;h2&gt;كلمات باللغة العربية تأتي من جهة اليمين&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a link for the webpage
  <a href="http://lotav.com/right2left.html" rel="nofollow noreferrer">http://lotav.com/right2left.html</a>
  Please try it out on mobile device or use google chrome with setting the device toggle into mobile device and it will misbehave. And compare it with running the site on PC browser which will work normal.</p>
  
  <p>And two pictures to explain what I mean. The first one when it loads normally on the PC and the second one when it loads abnormally on the mobile. <a href="https://i.stack.imgur.com/9PfV4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9PfV4.png" alt="When it loads normal on PC"></a> and <a href="https://i.stack.imgur.com/4Z82m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Z82m.png" alt="When it loads abnormally on the mobile"></a></p>