Question

我很难找到导致问题的原因。感谢您的帮助。在网站中，我将html文本方向设置为从右到左，因为该网站使用阿拉伯语。并且有css动画，它们都正常运行。除非满足以下条件：当html文本方向为从右到左并且我在移动设备上浏览网站时。或使用Google Chrome中的设备切换选项。页面加载时，它将加载到设置为左侧-100％的div上，而不是加载内容，并且-100％的div会出现在页面的中间。这给人一种错觉，那就是整个网页都是从右边来的。我不知道如何为正在考虑视口的移动设备解决此问题，但找不到解决方案。这是该网页的代码

<!DOCTYPE html>
<html dir="rtl" lang="ar" >
<head>
<meta charset="UTF-8">
<title>RTL TEST SITE</title>
<style type="text/css">
.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;
  }
}
</style>
</head>
<body class="rtl" >

    <div style="background:green;text-align:center;">
        <a>عنوان الصفحة</a>
    </div>

    <div class="fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
        <h2>كلمات باللغة العربية تأتي من جهة اليسار</h2>
    </div>

    <p>فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة </p>

    <div class="fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
        <h2>كلمات باللغة العربية تأتي من جهة اليمين</h2>
    </div>
</body>
</html>

这是网页的链接 http://lotav.com/right2left.html 请在移动设备上尝试使用该设备，或将Google chrome设置为设备切换到移动设备，否则它将无法正常运行。并将其与在PC浏览器上运行站点可以正常工作进行比较。

有两张图片解释了我的意思。第一个在PC上正常加载时，第二个在手机上异常加载时。和

Answer 1

我不完全知道您的网站上发生了什么，我看到了，所以我尝试使用您的代码并将其应用到默认按钮上，并且没有任何问题。我只添加了课程。

.fade-in-left {
    animation: fadeInLeft ease 1s;
  -webkit-animation: fadeInLeft ease 1s;
  -moz-animation: fadeInLeft ease 1s;
  -o-animation: fadeInLeft ease 1s;
  -ms-animation: fadeInLeft ease 1s;
}

https://jsfiddle.net/HiramRamirez/6qy9e52d/

希望这对您有所帮助。

CSS从右到左@keyframes转换：-100％不转换

1 个答案: