我正在使用animate.css来制作CSS3摇晃效果,CSS看起来像下面的片段。现在它来回晃动多次,我想把晃动次数减半。有没有办法用animate css3来实现,或者我需要修改下面的css3?如果有,有什么好办法?
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
不太确定你想如何 "将抖动减半"。你是指速度、摇摆吗?
这是我想出来的办法。演示
如果你想减慢动画的速度,可以更改`-webkit-animation-duration。
这是一个自定义的酷炫摇摆效果。
@keyframes shake {
0% {
-webkit-transform:translate(2px,1px) rotate(0deg)
}
10% {
-webkit-transform:translate(-1px,-2px) rotate(-1deg)
}
20% {
-webkit-transform:translate(-3px,0px) rotate(1deg)
}
30% {
-webkit-transform:translate(0px,2px) rotate(0deg)
}
40% {
-webkit-transform:translate(1px,-1px) rotate(1deg)
}
50% {
-webkit-transform:translate(-1px,2px) rotate(-1deg)
}
60% {
-webkit-transform:translate(-3px,1px) rotate(0deg)
}
70% {
-webkit-transform:translate(2px,1px) rotate(-1deg)
}
80% {
-webkit-transform:translate(-1px,-1px) rotate(1deg)
}
90% {
-webkit-transform:translate(2px,2px) rotate(0deg)
}
100% {
-webkit-transform:translate(1px,-2px) rotate(-1deg)
}
}
这里有一个简单的 演示