我尝试用 @keyframes 用阿拉伯语写一个句子，但 @keyframes 不支持阿拉伯语，并且出现难以理解的字符
.caption { background-color: black; }
.caption h1::after {
animation: move 3s infinite;
content: "";
border-left: 1px solid #fff;
color: #fff !important;
}
@keyframes move {
0% {
content: "م"
}
10% {
content: "مر"
}
20% {
content: "مرح"
}
30% {
content: "مرحب"
}
100% {
content: "مرحباً"
}
}<div class="caption">
<h1></h1>
</div>类似于 =-&++#@ 的字母和符号
对于阿拉伯语，包括属性dir="rtl" and lang="ar"在带有阿拉伯字符的标签元素上：
h1::after {
content: "مرح";
}
示例1：
<h1>Testing Arabic</h1>
这会错误地渲染字符（在 Chrome 上似乎可以工作，但在 Safari 和 Firefox 上则不行）。
示例2：
<h1 dir="rtl" lang="ar">Testing Arabic</h1>
这渲染正确！
另外，您可以在此处阅读有关“内容”属性动画问题的更多信息：https://css-tricks.com/animating-the-content-property/
您也可以将其包含在您的内部<head></head> tags <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">