CSS从右到左@keyframes转换:-100％不转换 [英] CSS Right to Left @keyframes transform:-100% to transform none
问题描述
我很难找到导致问题的原因.感谢您的帮助.在网站中，我将html文本方向设置为从右到左，因为该网站使用阿拉伯语.并且有css动画，它们都正常运行.除非满足以下条件:当html文本方向从右到左并且我正在移动设备上浏览网站时.或使用谷歌浏览器中的设备切换选项.加载页面时，它将加载在设置为-100％左侧的div上，而不是加载内容，并且-100％的div位于页面的中间.这给人一种错觉，那就是整个网页都是从右边来的.我不知道如何为正在考虑视口的移动设备解决此问题，但找不到解决方案.这是该网页的代码
<！DOCTYPE html>< html dir ="rtl" lang ="ar">< head>< meta charset ="UTF-8">< title> RTL测试站点</title>< style type ="text/css">.animated {动画时间:1秒；animation-fill-mode:两者；}@keyframes fadeInLeft {从 {转换:translate3d(-100％，0，0);}到 {转换:无；}}@keyframes fadeInRight {从 {转换:translate3d(100％，0，0);}到 {转换:无；}}</style></head>< body class ="rtl">< div style ="background:green; text-align:center;">< a>عنوانالصفحة</a></div>< div class ="fadeInLeft动画" style =可见性:可见；动画名称:fadeInLeft;">< h2>/h2></div>&为lt; p为H.فقرةمكتوبةباللغةالعربيبينالكلماتالمتحركةلتبينالمشكلة,,,فقرةمكتوبةباللغةالعربيبينالكلماتالمتحركةلتبينالمشكلة,,,فقرةمكتوبةباللغةالعربيبينالكلماتالمتحركةلتبينالمشكلة,,,فقرةمكتوبةباللغةالعربيبينالكلماتالمتحركةلتبينالمشكلة，</p>，，فقرةمكتوبةباللغةالعربيبينالكلماتالمتحركةلتبينالمشكلة，</p>< div class ="fadeInRight动画" style =可见性:可见；动画名称:fadeInRight;">< h2>كلماتباللغةالعربيةتأتيمنجهةاليمين</h2></div></body></html> 这是网页的链接和
希望这对您有所帮助.
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
<!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>
Here is a link for the webpage http://lotav.com/right2left.html 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.
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. and
I don't exactly know what is going on your website, I saw it so I tried using your code and apply it on the a default button and it worked without any problems. I added the class only.
.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/
Hopefully this may help you.
这篇关于CSS从右到左@keyframes转换:-100％不转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
