CSS3 animation 实现图标编辑状态抖动效果

@keyframes shake{
2% {
transform:rotate(0.8deg); }
4% {
transform:rotate(-0.8deg); }
6% {
transform:rotate(0.8deg); }
8% {
transform:rotate(-0.8deg); }
10% {
transform:rotate(0.8deg); }
12% {
transform:rotate(-0.8deg); }
14% {
transform:rotate(0.8deg); }
16% {
transform:rotate(-0.8deg); }
18% {
transform:rotate(0.8deg); }
20% {
transform:rotate(-0.8deg); }
22% {
transform:rotate(-0.8deg); }
24% {
transform:rotate(0.8deg); }
26% {
transform:rotate(-0.8deg); }
28% {
transform:rotate(0.8deg); }
30% {
transform:rotate(-0.8deg); }
32% {
transform:rotate(0.8deg); }
34% {
transform:rotate(-0.8deg); }
36% {
transform:rotate(0.8deg); }
38% {
transform:rotate(-0.8deg); }
40% {
transform:rotate(0.8deg); }
42% {
transform:rotate(-0.8deg); }
44% {
transform:rotate(0.8deg); }
46% {
transform:rotate(-0.8deg); }
48% {
transform:rotate(0.8deg); }
50% {
transform:rotate(-0.8deg); }
52% {
transform:rotate(0.8deg); }
54% {
transform:rotate(-0.8deg); }
56% {
transform:rotate(0.8deg); }
58% {
transform:rotate(-0.8deg); }
60% {
transform:rotate(0.8deg); }
62% {
transform:rotate(-0.8deg); }
64% {
transform:rotate(0.8deg); }
66% {
transform:rotate(-0.8deg); }
68% {
transform:rotate(0.8deg); }
70% {
transform:rotate(-0.8deg); }
72% {
transform:rotate(0.8deg); }
74% {
transform:rotate(-0.8deg); }
76% {
transform:rotate(0.8deg); }
78% {
transform:rotate(-0.8deg); }
80% {
transform:rotate(0.8deg); }
82% {
transform:rotate(-0.8deg); }
84% {
transform:rotate(0.8deg); }
86% {
transform:rotate(-0.8deg); }
88% {
transform:rotate(0.8deg); }
90% {
transform:rotate(-0.8deg); }
92% {
transform:rotate(0.8deg); }
94% {
transform:rotate(-0.8deg); }
96% {
transform:rotate(0.8deg); }
98% {
transform:rotate(-0.8deg); }
0%, 100% {
transform: translate(0, 0) rotate(0); }
}


img{
animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: shake;
animation-timing-function: ease-in-out;
}


更多抖动效果参考:

http://elrumordelaluz.github.io/csshake/

相关文章