如何在CSS3中增加动画时间

我有一个带有css的div：

#six {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 5s infinite;
-webkit-animation-delay: 2s;
animation: myfirst 5s infinite;
animation-delay: 2s;
position: absolute;
left: 100px;
top: 210px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    30%  {background: red;}
}


/* Standard syntax */
@keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    30%  {background: red;}
}

正如你所见，它只是使背景每五秒钟闪烁一次黄色。我怎么能让那五秒钟改变每一个循环？例如，第一次需要5秒，然后下一次需要4秒，然后是3、2、1等等

---

谢谢

您可以扩展您的动画来为您完成：

@keyframes myfirst {
    0% {background: red;}
    16.6666% {background: yellow;}
    33.3333% {background: red;}
    46.6666% {background: yellow;}
    60% {background: yellow;}
    70% {background: red;}
    80% {background: yellow;}
    86.6666% {background:red;}
    93.3333% {background:yellow;}
    96.6666% {background:red;}
    100% {backgrond:yellow};
}

---

据我所知，这里有一个

，您必须使用javascript/jquery来实现这一点。您可以扩展您的动画以支持它，因此您的总动画时间为15秒