首页 > 代码库 > css animate

css animate

用steps()函数 实现动画闪烁效果
@keyframes flash{    
    100%{
        background-position:0 -100%; 
    }
}
    .container{        
        background-image:url(yunxiangsui.png);
        background-position: 0 0;
    }
    .container:hover{
        -webkit-animation: flash 1s 0s infinite  steps(3);
    }

这里主要用到贝塞尔曲线中的steps(number_of_steps,direction),这个函数把每帧之间的范围分成对应的步数(number_of_step),没此跳到对应步数的位置,并且可以指定方向(start or end)来定义动画是左连续还是右连续。

 

css animate