@keyframes around { from { margin-left: 100%; } to { /* var接受传入的变量 */ margin-left: var(--marqueeWidth--); } } 为什么苹果手机不起效果

`@keyframes` 是 CSS 中用于定义动画的关键帧规则。在你提供的代码中，`@keyframes around` 定义了一个动画，通过改变 `margin-left` 属性的值来实现跑马灯效果。

关于为什么在苹果手机上不起效果，可能有以下几个原因：

1. CSS 变量的兼容性：CSS 变量（也称为自定义属性）在某些较旧的浏览器和移动设备上可能不被完全支持。如果你使用的是比较旧的 iOS 版本或 Safari 浏览器，可能不支持 CSS 变量，导致无法正确解析 `var(--marqueeWidth--)`。

2. 兼容性前缀：某些 CSS 属性和动画效果在不同浏览器中需要添加特定的前缀。你可以尝试添加 `-webkit-` 前缀来适配 Safari 浏览器和 iOS 设备。例如：`-webkit-margin-left: var(--marqueeWidth--);`。

3. 其他 CSS 规则冲突：请确保没有其他 CSS 规则或样式对跑马灯元素进行了覆盖或干扰。可能有其他样式或规则导致动画效果无法正常显示。

建议你检查以上情况，尝试添加兼容性前缀并确保没有其他样式冲突，以确保跑马灯动画在苹果手机上正常显示。另外，你也可以尝试使用其他实现方式，如使用 JavaScript 控制元素的滚动效果。

相关问题

@keyframes around { 0% { //margin-left: 100%; transform: translateX(0%); -webkit-transform: translateX(0%); } 100% { /* var接受传入的变量 */ //margin-left: var(--marqueeWidth--); transform: translateX(-100%); -webkit-transform: translateX(-100%); } }解释这段代码

这段代码是一个使用 `@keyframes` 定义的 CSS 动画。它创建了一个名为 "around" 的关键帧动画，用于实现一个向左平移的跑马灯效果。

在这个关键帧动画中，定义了两个关键帧：0% 和 100%。每个关键帧都包含了一组 CSS 属性和对应的值，用于定义动画在不同时间点的样式。

在 0% 的关键帧中，通过 `transform: translateX(0%);` 和 `-webkit-transform: translateX(0%);` 将元素的水平平移设置为 0%，也就是初始位置。

在 100% 的关键帧中，通过 `transform: translateX(-100%);` 和 `-webkit-transform: translateX(-100%);` 将元素的水平平移设置为 -100%，即向左平移整个元素宽度的百分之百。

这样，通过将动画应用于具有适当样式的元素，可以实现一个跑马灯效果，使内容从右侧滚动到左侧。你可以将这个动画应用于你想要实现跑马灯效果的元素上，例如使用 `animation` 属性和 `around` 关键字来引用这个动画。

需要注意的是，为了确保兼容性，除了使用 `transform` 属性外，还添加了 `-webkit-transform` 前缀，以支持在 Safari 浏览器和某些旧版本的 iOS 设备上的正确显示。