@-webkit-keyframes twinkling{ /*透明度由0到1*/
0%{
opacity:0.1; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
@keyframes twinkling{ /*透明度由0到1*/
0%{
opacity:0.1; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
要闪烁的元素的id是“element”。
当然,如果用jquery给元素加css,就像下面这样:
$("#element").css({-webkit-animation":"twinkling 2s infinite 0.9s ease-in-out alternate","animation":"twinkling 2s infinite 0.9s ease-in-out alternate});
/*
上面的参数稍微说明一下:
twinkling 2s:闪烁的间隔时间
0.9s:延迟时间
alternate:是否应该轮流反向播放动画
ease-in-out:闪烁的方式
opacity:透明度
*/
注:动画名称为“twinkling”,时间为“2s” ,动画次数为“无限次”,动画效果为“ease-in-out”。