keyframe animation not working in IOS devices

Question

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;
}

keyframe animation not working in IOS devices

0 Answers