animation + keyframes
简易样例如下:
背景渐变动画div {
width:300px;
height:48px;
background:#eee;
text-align:center;
}
div:active{
/*执行动画*/
animation:show 0.5s 1;
/*停止在最后一帧*/
animation-fill-mode:forwards;
}
@keyframes show{
10%{
background:radial-gradient(Circle,#999 40%, #999 40%, #eee 40%);
}
20%{
background:radial-gradient(Circle,#999 60%, #999 60%, #eee 60%);
}
40%{
background:radial-gradient(Circle,#999 80%, #999 80%, #eee 80%);
}
60%{
background:radial-gradient(Circle,#999 90%, #999 90%,, #eee 90%);
}
80%{
background:radial-gradient(Circle,#999 95%, #999 95%, #eee 95%);
}
100%{
background:radial-gradient(Circle,#999 100%, #999 100%, #eee 100%);
}
}
内容