keyframe animationをもちいてboxに表示させる文字を”A”→”B”→”C”→”D”->E""と変化させたいのですがcssのkeyframeからtext自体を変える方法がわかりません

<body>
<p>A->B->c->D</p>
<button onclick="start()">start</button>
<div class="box" id="b">here!</div>
</body>

考え方からわかりません。
jqueryでonclick startしたのち文字をコードをして取得すればいいのか、
そのままarrayで配列すればいいのか。

<style>
.box    {padding-top:30px;width:200px; height:80px; background:#ecc; font-weight:bold; font-size:250%; text-align:center;
animation-name:c;
animation-duration:3s;
animation-timin-function:ease-in;
animation-delay:1s;
animation-fill-mode:both;
-webkit-animation:a 3s ease-in 1s both;
}

以下のコードのようにkeyframeのtext自体を変えたいです。
（イメージです）

.c{
@keyframes c{
0%{ [text:A]}
25%{[text:B]}
50%{[text:C]}
75%{[text:D]}
100%{[text:E]}
}
@-webkit-keyframes c{
0%{ [text:A]}
25%{[text:B]}
50%{[text:C]}
75%{[text:D]}
100%{[text:E]}
}

　　}