Question

我正试图让我的页面上的标题从白色，彩虹，然后回到白色动画。这是我的代码：

CSS：

@-webkit-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@-moz-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@-o-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

.WhiteRainbowGlow {
    color: white;
    font-size: 2em;
    font-family: 'Segoe UI Light', Candara, Consolas, Calibri, sans-serif !important;
    text-shadow: 4px 3px 6px #000000;
    text-shadow: 4px 3px 6px rgba(0, 0, 0, .5);
    display: inline;
    padding-right: 10px;

    animation-name: rainbowGlow;
    animation-duration: 1s;
    animation-delay: 1s;
}

HTML：

<h1 class="WhiteRainbowGlow">My Next Winner</h1>

我忘记了什么吗？做错了什么？

Answer 1

.WhiteRainbowGlow {

...

    -moz-animation: rainbowGlow 1s;
    -o-animation: rainbowGlow  1s;
    -webkit-animation: rainbowGlow 1s;
    animation: rainbowGlow 1s;

}

Answer 2

将此添加到WhiteRainbowGlow

    -webkit-animation: rainbowGlow 5s 1 linear;
    -moz-animation: rainbowGlow 5s 1 linear;

jsfiddle示例

我的CSS动画中缺少什么？

2 个答案: