html - 为什么我的 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{ }