为什么我的css @keyframe动画不起作用？

Question

出于某种原因，我似乎无法获得css @keyframe动画。这对我来说非常令人沮丧。

我的非工作css @keyframe动画：http://codepen.io/anon/pen/yNKBay

来自它的代码：

HTML：

<div class="wrapper">
    <h1>This is a Test</h1>
</div>

CSS：

.wrapper h1 {
    font-size: 24px;
    line-height: 24px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: #1b1b1b;
    display: inline-block;
    animation: testOne 15s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease;
   -webkit-animation: testOne 15s; /* Safari & Chrome */
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-timing-function: ease;
}

@keyframes testOne {
    0% { color: #1b1b1b; }
    25% { color: #f3c13c; }
    50% { color: #6feeae; }
    75% { color: #75adf9; }
}

-webkit-@keyframes testOne {
    0% { color: #1b1b1b; }
    25% { color: #f3c13c; }
    50% { color: #6feeae; }
    75% { color: #75adf9; }
}

如果有人能告诉我我做错了什么，那就太好了。

谢谢，的 - M

Answer 1

应该是@ -webkit-keyframe testOne {}