animation语法
animation:name duration timing-function delay iteration-count direction
timing-function取值
timeing-function: linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier() / steps()
上面steps()不常用到却有时候非常有用,它是帧动画,其他值都是补间动画(线性动画),有时候一些动画效果必须用它才能实现,例如:今日头条,我们一般用其配合背景的变化制作一些有意思的帧动画。
steps()
steps()有两个参数,其中第一个参数是:每个关键帧之间执行次数,取值为正整数,第二个参数是:指定使用每个关键帧的起点或终点,取值为start或end,它有两个简写形式step-start相当于steps(1,start),step-end相当于steps(1,end)。
使用
假如上面是一张200 * 800的图片,我想实现在Hover的时候从A变化到A的逐帧动画,可以用以下方法来实现:
方法一:
.way1:hover{
/*在移上去的瞬间变成B,因为start会忽略开始帧*/
animation: way1 2s steps(3,start);/*ABCDA*/
animation: way1 2s steps(3,end);/*ABCA,因为end会忽略结束帧*/
}
@keyframes way1{
0%{
background-position: 0 0;
}
/*1/3{
background-position: 0 -200px;
}
2/3{
background-position: 0 -400px;
}*/
100%{
background-position: 0 -600px;
/*background-position: 0 100%;*/
}
}
方法二:
.way2:hover{
/*第一句*/animation: way2 2s steps(4,start);/*ABCDA*/
/*第二句*/animation: way2 2s steps(4,end);/*ABCDA*/
/*第三句*/animation: way2 2s steps(4,end) forwards;/*ABCDA*/
}
@keyframes way2{
/*实现一个从A到A的动画,推荐下面这样写,这样就不用纠结用start或end了,但其实用start或end还会有一丁点区别,就是start会立即到下一帧,end则不会*/
0%{
background-position: 0 800px; /*A*/
}
/*25%{
background-position: 0 600px; B
}
50%{
background-position: 0 400px; C
}
75%{
background-position: 0 200px; D
}*/
100%{
background-position: 0 0; /*A*/
}
}
/*下面这种写法和@keyframes way2是一样的*/
@keyframes way3{
0%{
background-position: 0 0; /*A*/
}
/*25%{
background-position: 0 -200px; B
}
50%{
background-position: 0 -400px; C
}
75%{
background-position: 0 -600px; D
}*/
100%{
background-position: 0 -800px; /*A*/
}
}
上面.way2:hover{}中“第二句”的写法会忽略最后的100%,但一个动画执行完还是会默认回到0%,所以我们看到的还是ABCDA。“第三句”的写法比较有意思,end会忽略100%,forwards又会停在最后一帧,这时候听谁的呢?答案:forwards。虽然“第二句”和“第三句”虽然看到的结果没有任何区别,但实际动画最后一次执行的帧却不同,“第二句”会跳过100%,“第三句”则不会,为了证明这一点看一个颜色变化例子就明白了。
颜色变化例子
.test:hover{
animation: colorChange 2s step-end;/*红绿*/
animation: colorChange 2s step-end forwards;/*红绿蓝*/
}
@keyframes colorChange{
0%{
background: red;
}
50%{
background: green;
}
100%{
background: blue;
}
}
利用steps()配合设计还可以作出好多有意思小东西,有兴趣可以去发掘。今日头条H5下载、倒计时
以上对steps()的分析都是从经验/测试/自己理解中得出的,非原理上的,所以可能出现不准确,发现望指正,谢谢!
.shan {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 235px;
height: 235px;
background-image: url(aaa.png);
background-repeat: no-repeat;
transform: translateZ(0);
animation: change .5s steps(2,end) infinite;
}
@keyframes change{
0%{
background-position:0 0;
}
100%{
background-position:-470px 0;
}
}
使用rem不能精确到数字时,可以用关键字来定位
.box{
height: 4.693333rem;
background: url(./aaa.png) no-repeat left top;
background-size: 10rem auto;
animation: change 1.2s step-start infinite;
}
@keyframes change{
50%{
background-position: left bottom;
}
}