当前位置： 文江博客话题详情

关键帧动画在iOS设备中不起作用

发布于 2025-02-06 20:37:24 字数 4711 浏览 4 评论 0原文

我有以下代码，其中加载动画在ios 设备
中不起作用。 我已经使用变换：旋转，它在iOS上不起作用，但它们在Android设备上正常工作

此代码不起作用的任何原因，我尝试了stackoverflow上提到的各种方法，但仍然他们不工作

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%;
    -webkit-animation: 1s webkit-loading linear;
    animation: 1s loading linear;
    animation-iteration-count: initial;
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0px auto;
    -o-animation-fill-mode: both;
    opacity: 0;
    transition: .5s;
}
.loading {
    border: 3px solid #4d86c8;
    border-top-color: #ffdd51;
    border-radius: 50%;
    -webkit-animation: 1s webkit-loading linear;
    animation: 1s loading linear;
    animation-iteration-count: initial;
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0px auto;
    -o-animation-fill-mode: both;
    opacity: 0;
    transition: 0.5s;
}
.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: rotate(0deg);
        -webkit-opacity: 1;
    }
    50% {
        -webkit-transform: rotate(360deg);
        -webkit-opacity: 1;
    }
    90% {
        -webkit-transform: rotate(360deg);
        -webkit-opacity: 1;
    }
    100% {
        -webkit-transform: rotate(360deg);
        -webkit-opacity: 0;
        -webkit-transform: scale(0);
    }
}
@keyframes loading {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: rotate(360deg);
        opacity: 1;
    }
    90% {
        transform: rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0;
        transform: scale(0);
    }
}

.loading:before {
    content: '';
    display: block;
    width: inherit;
    height: inherit;
    position: absolute;
    top: -0.4em;
    left: -0.4em;
    border-radius: 50%;
    opacity: 0.5;
}
li svg {
    width: 15px;
    margin-right: 8px;
    margin-top: -6px;
}
<body> 

      <div class="loading-steps load-animation">
        <ul>
            <li>
                <div class="box">
                    <div class="loading" style="animation-delay: 2s;"></div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><polyline class="path" fill="none" points="20,6 9,17 4,12" stroke="#FFDD51" stroke-miterlimit="10" stroke-width="3" style="animation-delay: 2s;"></polyline></svg> 
            </li>
            <li>
                <div class="box">
                    <div class="loading" style="animation-delay: 2.5s;"></div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><polyline class="path" fill="none" points="20,6 9,17 4,12" stroke="#FFDD51" stroke-miterlimit="10" stroke-width="3" style="animation-delay: 2.5s;"></polyline></svg>
            </li>
            
        </ul>
    </div>
</body>

原文

I have the below code, where the loading animation is not working in IOS devices
I have used transform: rotate which is not working on IOS but they are working fine on android devices

any reason why this code is not working, I have tried various ways mentioned on the StackOverflow but still they are not working

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%;
    -webkit-animation: 1s webkit-loading linear;
    animation: 1s loading linear;
    animation-iteration-count: initial;
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0px auto;
    -o-animation-fill-mode: both;
    opacity: 0;
    transition: .5s;
}
.loading {
    border: 3px solid #4d86c8;
    border-top-color: #ffdd51;
    border-radius: 50%;
    -webkit-animation: 1s webkit-loading linear;
    animation: 1s loading linear;
    animation-iteration-count: initial;
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0px auto;
    -o-animation-fill-mode: both;
    opacity: 0;
    transition: 0.5s;
}
.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: rotate(0deg);
        -webkit-opacity: 1;
    }
    50% {
        -webkit-transform: rotate(360deg);
        -webkit-opacity: 1;
    }
    90% {
        -webkit-transform: rotate(360deg);
        -webkit-opacity: 1;
    }
    100% {
        -webkit-transform: rotate(360deg);
        -webkit-opacity: 0;
        -webkit-transform: scale(0);
    }
}
@keyframes loading {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: rotate(360deg);
        opacity: 1;
    }
    90% {
        transform: rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0;
        transform: scale(0);
    }
}

.loading:before {
    content: '';
    display: block;
    width: inherit;
    height: inherit;
    position: absolute;
    top: -0.4em;
    left: -0.4em;
    border-radius: 50%;
    opacity: 0.5;
}
li svg {
    width: 15px;
    margin-right: 8px;
    margin-top: -6px;
}
<body> 

      <div class="loading-steps load-animation">
        <ul>
            <li>
                <div class="box">
                    <div class="loading" style="animation-delay: 2s;"></div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><polyline class="path" fill="none" points="20,6 9,17 4,12" stroke="#FFDD51" stroke-miterlimit="10" stroke-width="3" style="animation-delay: 2s;"></polyline></svg> 
            </li>
            <li>
                <div class="box">
                    <div class="loading" style="animation-delay: 2.5s;"></div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><polyline class="path" fill="none" points="20,6 9,17 4,12" stroke="#FFDD51" stroke-miterlimit="10" stroke-width="3" style="animation-delay: 2.5s;"></polyline></svg>
            </li>
            
        </ul>
    </div>
</body>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

╰◇生如夏花灿烂

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文