Question

我有一个div与css：

#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等等？

谢谢！

Answer 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};
}

这是一个demo

如何在CSS3中增加动画时间

1 个答案: