码迷,mamicode.com
首页 > Web开发 > 详细

css animate

时间:2016-10-28 13:35:31      阅读:908      评论:0      收藏:0      [点我收藏+]

标签:方向   实现   animate   webkit   连续   container   log   end   frame   

用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

标签:方向   实现   animate   webkit   连续   container   log   end   frame   

原文地址:http://www.cnblogs.com/yunxiangsui/p/5987395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!