IOS设备中CSS keyframe rotate加载动画不生效问题排查

你的代码存在4个会导致iOS Webkit内核（Safari、iOS端微信/钉钉等内置浏览器）动画失效的问题：

• 动画属性配置错误：仅给旧版Opera配置了animation-fill-mode，未给标准属性、Webkit属性配置填充规则，同时设置animation-iteration-count: initial（默认值为1，动画仅执行1次），搭配元素默认opacity: 0的初始样式，iOS严格按规范解析时，会在动画延迟等待阶段保持初始透明状态，动画执行1次结束后直接回到透明状态，看起来就像动画完全没运行；安卓浏览器内核容错性高，会自动补全循环逻辑才会表现正常。
• 关键帧写法错误：@-webkit-keyframes的100%帧内重复写了两次-webkit-transform属性，后面的scale(0)会覆盖前面的rotate(360deg)，导致旋转逻辑失效。
• 重复样式冲突：重复声明了两次.loading、两次.loading:before的样式规则，部分iOS版本对重复声明的动画属性解析存在bug，会直接忽略动画配置。
• 未触发硬件加速：iOS Webkit内核对非合成层的transform动画支持存在已知问题，未开启GPU加速时部分低版本系统会直接不渲染transform动画效果。

直接替换原有CSS部分即可，HTML结构无需修改：

body{
    background: blueviolet;
}

.loading-steps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 300px;
    margin: 40px auto 0 auto;
}
.load-animation {
    transition: all 450ms;
}
ol, ul {
    list-style: none;
}
.loading-steps li {
    margin-bottom: 15px;
    display: flex;
    position: relative;
    height: 21px;
    font-size: 13px;
    color: black;
    font-weight: 400;
}
.box {
    position: absolute;
    margin-bottom: 0.25em;
    vertical-align: top;
    transition: 0.3s color, 0.3s border, 0.3s transform, 0.3s opacity;
    margin-right: 0;
    left: -3px;
    margin-top: -4px;
}
.loading {
    border: 3px solid #4d86c8;
    border-top-color: #ffdd51;
    border-radius: 50%;
    /* 补全全内核动画配置，需要持续旋转就设置infinite，只转一圈就去掉infinite */
    -webkit-animation: 1s webkit-loading linear infinite;
    animation: 1s loading linear infinite;
    /* 补全全内核动画填充模式 */
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
    opacity: 1;
    transition: 0.5s;
    /* 触发GPU硬件加速，兼容iOS动画渲染 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.loading:before {
    content: '';
    display: block;
    width: inherit;
    height: inherit;
    position: absolute;
    top: -0.4em;
    left: -0.4em;
    border-radius: 50%;
    opacity: 0.5;
}
@-webkit-keyframes webkit-loading {
    0% {
        -webkit-transform: translateZ(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) rotate(360deg);
        opacity: 1;
    }
}
@keyframes loading {
    0% {
        transform: translateZ(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(0) rotate(360deg);
        opacity: 1;
    }
}
li svg {
    width: 15px;
    margin-right: 8px;
    margin-top: -6px;
}

提示：如果需要实现“旋转一圈后淡出缩小消失”的效果，不要把淡出缩放逻辑写在旋转动画的关键帧里，单独写一个加载完成的状态类，在加载完成时通过JS给.loading元素添加该类触发淡出动画即可，避免多transform属性写在同一关键帧导致iOS解析冲突。

内容的提问来源于stack exchange，提问作者Priya