一直以来,本人都认为css3的animation只能实现渐变动画,比如高度从0渐变到100px这类的。而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。

但是在看到天才的师姐给的例子之后, 让我愧疚得无地自容,原来还真有css3帧动画的,T_T。这个属性是 timing-function: step-end; 而且firefox、webkit、ie10都有支持,详细介绍可以在这里(https://developer.mozilla.org/en/CSS/timing-function#step-end)看。

跟帧动画有关的timing-function有step-start,step-end。就拿step-end来说, 它的效果是在每一步的结束点, 进行跳变。

比如下面的代码,这个动画有两步, 如果是用linear方式渐变,那么在动画的执行过程中,background-position-x的值将从0一直递减到-100%, 你看到的效果就是: 背景图片一直在慢慢的向右(注意,是向右)移动; 而如果用step-end方式,则可以看到背景是突然变成 background-position-x: -100%处的。more

@-webkit-keyframes auto-circle{
    0%{
      background-position-x: 0;
    }
    100%{
      background-position-x: -100%;
    }
}
说的再多也不如演示来的实际,有了step-end,我们又可以实现一种菊花啦,高清无码, 这下子gif要完完全全的失业了,嘿嘿... 你可以把鼠标狠狠地砸向[这里](http://demo.imatlas.com/css3-frame-loading-demo.html)( http://demo.imatlas.com/css3-frame-loading-demo.html )demo,完整的代码如下:
@-webkit-keyframes auto-circle{
    0%{
      background-position-x: 0;
    }
    10%{
      background-position-x: -100%;
    }
    20%{
      background-position-x: -200%;
    }
    //... 你看不到的省略代码
    90%{
      background-position-x: -900%;
    }
    100%{
      background-position-x: -1000%;
    }
}
@-moz-keyframes auto-circle{
    0%{
      background-position-x: 0;
    }
    10%{
      background-position-x: -100%;
    }
    20%{
      background-position-x: -200%;
    }
    //... 你看不到的省略代码
    90%{
      background-position-x: -900%;
    }
    100%{
      background-position-x: -1000%;
    }
}
.loading{
    background: url(/uploads/2011-10-01/loading3.png) 0 0;
    width: 128px;
    height: 128px;
    -webkit-animation: auto-circle 0.5s step-end infinite ;
    -moz-animation: auto-circle 0.5s step-end infinite ;

    margin: 20px;
}

因为是帧动画,你就需要确定这个菊花有多少帧,然后用百本比划分keyframes。 如果是两帧, 一个0%和一个100%就够了。 我的图片有10帧, 所以我把它划成10%一帧,0%跟-1000%是同一帧。

另外这里我用百分比设置position, 好处是如果loading的大小改变了, 并不需要去修改keyframes的background-position,就能够一劳永逸啦 ^_^。

参考资料:

  1. http://dev.w3.org/csswg/css3-transitions/#transition-timing-function
  2. https://developer.mozilla.org/en/CSS/timing-function#step-end
  3. http://msdn.microsoft.com/en-us/library/windows/apps/hh466322.aspx
Comments
Write a Comment

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟