一直以来本人都认为css3的animation只能实現渐变动画,比如高度从0渐变到100px这类的而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。
但是在看到天才的师姐给的例子之后 让我愧疚得无地自容,原来还真有css3帧动画的T_T。这个属性是 timing-function: step-end; 而且firefox、webkit、ie10都有支持详细介绍可以在这里()看。
比如下面的代码这个动画有兩步, 如果是用linear方式渐变那么在动画的执行过程中,background-position-x的值将从0一直递减到-100% 你看到的效果就是: 背景图片一直在慢慢的向右(注意,是向祐)移动; 而如果用step-end方式则可以看到背景是突然变成 background-position-x: -100%处的。
说的再多也不如演示来的实际有了step-end,我们又可以实现一种菊花啦高清无码, 这下子gif要完完全全的失业了嘿嘿… 你可以把鼠标狠狠地砸向(
因为是帧动画,你就需要确定这个菊花有多少帧然后用百本比划分keyframes。 如果是两帧 一个0%和一个100%就够了。 我的图片有10帧 所以我把它划成10%一帧,0%跟-1000%是同一帧