Skip to content

Commit 2984b7c

Browse files
angelorohitangelorohit
committed
ADDED: vibrate animation.
Signed-off-by: angelorohit <angelorohit@gmail.com>
1 parent fe9fdb7 commit 2984b7c

File tree

2 files changed

+178
-1
lines changed

2 files changed

+178
-1
lines changed

‎animate.css‎

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3918,4 +3918,98 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
39183918
-ms-animation-duration: 0.25s;
39193919
-o-animation-duration: 0.25s;
39203920
animation-duration: 0.25s;
3921-
}
3921+
}
3922+
3923+
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
3924+
3925+
@-webkit-keyframes vibrate {
3926+
0% { -webkit-transform: skewX(9deg); }
3927+
10% { -webkit-transform: skewX(-8deg); }
3928+
20% { -webkit-transform: skewX(7deg); }
3929+
30% { -webkit-transform: skewX(-6deg); }
3930+
40% { -webkit-transform: skewX(5deg); }
3931+
50% { -webkit-transform: skewX(-4deg); }
3932+
60% { -webkit-transform: skewX(3deg); }
3933+
70% { -webkit-transform: skewX(-2deg); }
3934+
80% { -webkit-transform: skewX(1deg); }
3935+
90% { -webkit-transform: skewX(0deg); }
3936+
100% { -webkit-transform: skewX(0deg); }
3937+
}
3938+
3939+
@-moz-keyframes vibrate {
3940+
0% { -moz-transform: skewX(9deg); }
3941+
10% { -moz-transform: skewX(-8deg); }
3942+
20% { -moz-transform: skewX(7deg); }
3943+
30% { -moz-transform: skewX(-6deg); }
3944+
40% { -moz-transform: skewX(5deg); }
3945+
50% { -moz-transform: skewX(-4deg); }
3946+
60% { -moz-transform: skewX(3deg); }
3947+
70% { -moz-transform: skewX(-2deg); }
3948+
80% { -moz-transform: skewX(1deg); }
3949+
90% { -moz-transform: skewX(0deg); }
3950+
100% { -moz-transform: skewX(0deg); }
3951+
}
3952+
3953+
@-ms-keyframes vibrate {
3954+
0% { -ms-transform: skewX(9deg); }
3955+
10% { -ms-transform: skewX(-8deg); }
3956+
20% { -ms-transform: skewX(7deg); }
3957+
30% { -ms-transform: skewX(-6deg); }
3958+
40% { -ms-transform: skewX(5deg); }
3959+
50% { -ms-transform: skewX(-4deg); }
3960+
60% { -ms-transform: skewX(3deg); }
3961+
70% { -ms-transform: skewX(-2deg); }
3962+
80% { -ms-transform: skewX(1deg); }
3963+
90% { -ms-transform: skewX(0deg); }
3964+
100% { -ms-transform: skewX(0deg); }
3965+
}
3966+
3967+
@-o-keyframes vibrate {
3968+
0% { -o-transform: skewX(9deg); }
3969+
10% { -o-transform: skewX(-8deg); }
3970+
20% { -o-transform: skewX(7deg); }
3971+
30% { -o-transform: skewX(-6deg); }
3972+
40% { -o-transform: skewX(5deg); }
3973+
50% { -o-transform: skewX(-4deg); }
3974+
60% { -o-transform: skewX(3deg); }
3975+
70% { -o-transform: skewX(-2deg); }
3976+
80% { -o-transform: skewX(1deg); }
3977+
90% { -o-transform: skewX(0deg); }
3978+
100% { -o-transform: skewX(0deg); }
3979+
}
3980+
3981+
@keyframes vibrate {
3982+
0% { transform: skewX(9deg); }
3983+
10% { transform: skewX(-8deg); }
3984+
20% { transform: skewX(7deg); }
3985+
30% { transform: skewX(-6deg); }
3986+
40% { transform: skewX(5deg); }
3987+
50% { transform: skewX(-4deg); }
3988+
60% { transform: skewX(3deg); }
3989+
70% { transform: skewX(-2deg); }
3990+
80% { transform: skewX(1deg); }
3991+
90% { transform: skewX(0deg); }
3992+
100% { transform: skewX(0deg); }
3993+
}
3994+
3995+
.vibrate {
3996+
-webkit-animation-name: vibrate;
3997+
-moz-animation-name: vibrate;
3998+
-ms-animation-name: vibrate;
3999+
-o-animation-name: vibrate;
4000+
animation-name: vibrate;
4001+
4002+
-webkit-animation-timing-function: ease-in;
4003+
-moz-animation-timing-function: ease-in;
4004+
-ms-animation-timing-function: ease-in;
4005+
-o-animation-timing-function: ease-in;
4006+
animation-timing-function: ease-in;
4007+
}
4008+
4009+
.animated.vibrate {
4010+
-webkit-animation-duration: 0.5s;
4011+
-moz-animation-duration: 0.5s;
4012+
-ms-animation-duration: 0.5s;
4013+
-o-animation-duration: 0.5s;
4014+
animation-duration: 0.5s;
4015+
}

‎source/vibrate.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@-webkit-keyframes vibrate {
2+
0% { -webkit-transform: skewX(9deg); }
3+
10% { -webkit-transform: skewX(-8deg); }
4+
20% { -webkit-transform: skewX(7deg); }
5+
30% { -webkit-transform: skewX(-6deg); }
6+
40% { -webkit-transform: skewX(5deg); }
7+
50% { -webkit-transform: skewX(-4deg); }
8+
60% { -webkit-transform: skewX(3deg); }
9+
70% { -webkit-transform: skewX(-2deg); }
10+
80% { -webkit-transform: skewX(1deg); }
11+
90% { -webkit-transform: skewX(0deg); }
12+
100% { -webkit-transform: skewX(0deg); }
13+
}
14+
15+
@-moz-keyframes vibrate {
16+
0% { -moz-transform: skewX(9deg); }
17+
10% { -moz-transform: skewX(-8deg); }
18+
20% { -moz-transform: skewX(7deg); }
19+
30% { -moz-transform: skewX(-6deg); }
20+
40% { -moz-transform: skewX(5deg); }
21+
50% { -moz-transform: skewX(-4deg); }
22+
60% { -moz-transform: skewX(3deg); }
23+
70% { -moz-transform: skewX(-2deg); }
24+
80% { -moz-transform: skewX(1deg); }
25+
90% { -moz-transform: skewX(0deg); }
26+
100% { -moz-transform: skewX(0deg); }
27+
}
28+
29+
@-ms-keyframes vibrate {
30+
0% { -ms-transform: skewX(9deg); }
31+
10% { -ms-transform: skewX(-8deg); }
32+
20% { -ms-transform: skewX(7deg); }
33+
30% { -ms-transform: skewX(-6deg); }
34+
40% { -ms-transform: skewX(5deg); }
35+
50% { -ms-transform: skewX(-4deg); }
36+
60% { -ms-transform: skewX(3deg); }
37+
70% { -ms-transform: skewX(-2deg); }
38+
80% { -ms-transform: skewX(1deg); }
39+
90% { -ms-transform: skewX(0deg); }
40+
100% { -ms-transform: skewX(0deg); }
41+
}
42+
43+
@-o-keyframes vibrate {
44+
0% { -o-transform: skewX(9deg); }
45+
10% { -o-transform: skewX(-8deg); }
46+
20% { -o-transform: skewX(7deg); }
47+
30% { -o-transform: skewX(-6deg); }
48+
40% { -o-transform: skewX(5deg); }
49+
50% { -o-transform: skewX(-4deg); }
50+
60% { -o-transform: skewX(3deg); }
51+
70% { -o-transform: skewX(-2deg); }
52+
80% { -o-transform: skewX(1deg); }
53+
90% { -o-transform: skewX(0deg); }
54+
100% { -o-transform: skewX(0deg); }
55+
}
56+
57+
@keyframes vibrate {
58+
0% { transform: skewX(9deg); }
59+
10% { transform: skewX(-8deg); }
60+
20% { transform: skewX(7deg); }
61+
30% { transform: skewX(-6deg); }
62+
40% { transform: skewX(5deg); }
63+
50% { transform: skewX(-4deg); }
64+
60% { transform: skewX(3deg); }
65+
70% { transform: skewX(-2deg); }
66+
80% { transform: skewX(1deg); }
67+
90% { transform: skewX(0deg); }
68+
100% { transform: skewX(0deg); }
69+
}
70+
71+
.vibrate {
72+
-webkit-animation-name: vibrate;
73+
-moz-animation-name: vibrate;
74+
-ms-animation-name: vibrate;
75+
-o-animation-name: vibrate;
76+
animation-name: vibrate;
77+
78+
-webkit-animation-timing-function: ease-in;
79+
-moz-animation-timing-function: ease-in;
80+
-ms-animation-timing-function: ease-in;
81+
-o-animation-timing-function: ease-in;
82+
animation-timing-function: ease-in;
83+
}

0 commit comments

Comments
 (0)