css 中的@keyframe 动画问题

Question

我在 CSS 中尝试了一个动画，但遇到了一个问题，它无法正常工作。这是我的 fiddle

ul {
    display: block;
}
ul>li {
    list-style-type: none;
    transition: all 0.5s ease-out;
}
ul>li:nth-child(1) {
    height:100px;
    width: 100px;
    background: transparent;
    border-radius: 100%;
    border:solid 5px #00f;
    border-right: transparent;
    border-left: transparent;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    margin: auto;
    animation: spin 1s infinite ease-out;
}
ul>li:nth-child(2) {
    height:75px;
    width: 75px;
    background: transparent;
    border-radius: 100%;
    border:solid 5px #0f0;
    border-top: transparent;
    border-bottom: transparent;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    margin: auto;
    animation: spin2 1s infinite ease-out;
}
ul>li:nth-child(3) {
    height:50px;
    width: 50px;
    background: transparent;
    border-radius: 100%;
    border:solid 5px #f00;
    border-left: transparent;
    border-right: transparent;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    margin: auto;
    animation: spin3 1s infinite ease-out;
}
@keyframes spin1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes spin2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes spin3 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Answer 1

添加 browser prefixes 并且您还在为第一个不存在的 li 使用动画名称 spin。

    ul {
        display: block;
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
    ul>li {
        list-style-type: none;
    }
    ul>li:nth-child(1) {
        height:100px;
        width: 100px;
        background: transparent;
        border-radius: 100%;
        border:solid 5px #00f;
        border-right: transparent;
        border-left: transparent;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left:0;
        margin: auto;
        -webkit-animation: spin1 5s infinite ease-out;
        animation: spin1 5s infinite ease-out;
    }
    ul>li:nth-child(2) {
        height:75px;
        width: 75px;
        background: transparent;
        border-radius: 100%;
        border:solid 5px #0f0;
        border-top: transparent;
        border-bottom: transparent;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left:0;
        margin: auto;
        -webkit-animation: spin2 5s infinite ease-out;
        animation: spin2 5s infinite ease-out;
    }
    ul>li:nth-child(3) {
        height:50px;
        width: 50px;
        background: transparent;
        border-radius: 100%;
        border:solid 5px #f00;
        border-left: transparent;
        border-right: transparent;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left:0;
        margin: auto;
        -webkit-animation: spin3 5s infinite ease-out;
        animation: spin3 5s infinite ease-out;
    }
    @-webkit-keyframes spin1 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes spin2 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes spin3 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes spin1 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes spin2 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes spin3 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

css 中的@keyframe 动画问题

@keyframe animation issue in css

html

css

keyframe