mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-17 17:45:17 +01:00
ADDED: vibrate animation.
Signed-off-by: angelorohit <angelorohit@gmail.com>
This commit is contained in:
angelorohit
parent
fe9fdb7958
commit
2984b7c050
2 changed files with 178 additions and 1 deletions
96
animate.css
vendored
96
animate.css
vendored
|
|
@ -3918,4 +3918,98 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||
-ms-animation-duration: 0.25s;
|
||||
-o-animation-duration: 0.25s;
|
||||
animation-duration: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
|
||||
|
||||
@-webkit-keyframes vibrate {
|
||||
0% { -webkit-transform: skewX(9deg); }
|
||||
10% { -webkit-transform: skewX(-8deg); }
|
||||
20% { -webkit-transform: skewX(7deg); }
|
||||
30% { -webkit-transform: skewX(-6deg); }
|
||||
40% { -webkit-transform: skewX(5deg); }
|
||||
50% { -webkit-transform: skewX(-4deg); }
|
||||
60% { -webkit-transform: skewX(3deg); }
|
||||
70% { -webkit-transform: skewX(-2deg); }
|
||||
80% { -webkit-transform: skewX(1deg); }
|
||||
90% { -webkit-transform: skewX(0deg); }
|
||||
100% { -webkit-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes vibrate {
|
||||
0% { -moz-transform: skewX(9deg); }
|
||||
10% { -moz-transform: skewX(-8deg); }
|
||||
20% { -moz-transform: skewX(7deg); }
|
||||
30% { -moz-transform: skewX(-6deg); }
|
||||
40% { -moz-transform: skewX(5deg); }
|
||||
50% { -moz-transform: skewX(-4deg); }
|
||||
60% { -moz-transform: skewX(3deg); }
|
||||
70% { -moz-transform: skewX(-2deg); }
|
||||
80% { -moz-transform: skewX(1deg); }
|
||||
90% { -moz-transform: skewX(0deg); }
|
||||
100% { -moz-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes vibrate {
|
||||
0% { -ms-transform: skewX(9deg); }
|
||||
10% { -ms-transform: skewX(-8deg); }
|
||||
20% { -ms-transform: skewX(7deg); }
|
||||
30% { -ms-transform: skewX(-6deg); }
|
||||
40% { -ms-transform: skewX(5deg); }
|
||||
50% { -ms-transform: skewX(-4deg); }
|
||||
60% { -ms-transform: skewX(3deg); }
|
||||
70% { -ms-transform: skewX(-2deg); }
|
||||
80% { -ms-transform: skewX(1deg); }
|
||||
90% { -ms-transform: skewX(0deg); }
|
||||
100% { -ms-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-o-keyframes vibrate {
|
||||
0% { -o-transform: skewX(9deg); }
|
||||
10% { -o-transform: skewX(-8deg); }
|
||||
20% { -o-transform: skewX(7deg); }
|
||||
30% { -o-transform: skewX(-6deg); }
|
||||
40% { -o-transform: skewX(5deg); }
|
||||
50% { -o-transform: skewX(-4deg); }
|
||||
60% { -o-transform: skewX(3deg); }
|
||||
70% { -o-transform: skewX(-2deg); }
|
||||
80% { -o-transform: skewX(1deg); }
|
||||
90% { -o-transform: skewX(0deg); }
|
||||
100% { -o-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@keyframes vibrate {
|
||||
0% { transform: skewX(9deg); }
|
||||
10% { transform: skewX(-8deg); }
|
||||
20% { transform: skewX(7deg); }
|
||||
30% { transform: skewX(-6deg); }
|
||||
40% { transform: skewX(5deg); }
|
||||
50% { transform: skewX(-4deg); }
|
||||
60% { transform: skewX(3deg); }
|
||||
70% { transform: skewX(-2deg); }
|
||||
80% { transform: skewX(1deg); }
|
||||
90% { transform: skewX(0deg); }
|
||||
100% { transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
.vibrate {
|
||||
-webkit-animation-name: vibrate;
|
||||
-moz-animation-name: vibrate;
|
||||
-ms-animation-name: vibrate;
|
||||
-o-animation-name: vibrate;
|
||||
animation-name: vibrate;
|
||||
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-ms-animation-timing-function: ease-in;
|
||||
-o-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.animated.vibrate {
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-moz-animation-duration: 0.5s;
|
||||
-ms-animation-duration: 0.5s;
|
||||
-o-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
|
|
|||
83
source/vibrate.css
Normal file
83
source/vibrate.css
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
@-webkit-keyframes vibrate {
|
||||
0% { -webkit-transform: skewX(9deg); }
|
||||
10% { -webkit-transform: skewX(-8deg); }
|
||||
20% { -webkit-transform: skewX(7deg); }
|
||||
30% { -webkit-transform: skewX(-6deg); }
|
||||
40% { -webkit-transform: skewX(5deg); }
|
||||
50% { -webkit-transform: skewX(-4deg); }
|
||||
60% { -webkit-transform: skewX(3deg); }
|
||||
70% { -webkit-transform: skewX(-2deg); }
|
||||
80% { -webkit-transform: skewX(1deg); }
|
||||
90% { -webkit-transform: skewX(0deg); }
|
||||
100% { -webkit-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes vibrate {
|
||||
0% { -moz-transform: skewX(9deg); }
|
||||
10% { -moz-transform: skewX(-8deg); }
|
||||
20% { -moz-transform: skewX(7deg); }
|
||||
30% { -moz-transform: skewX(-6deg); }
|
||||
40% { -moz-transform: skewX(5deg); }
|
||||
50% { -moz-transform: skewX(-4deg); }
|
||||
60% { -moz-transform: skewX(3deg); }
|
||||
70% { -moz-transform: skewX(-2deg); }
|
||||
80% { -moz-transform: skewX(1deg); }
|
||||
90% { -moz-transform: skewX(0deg); }
|
||||
100% { -moz-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes vibrate {
|
||||
0% { -ms-transform: skewX(9deg); }
|
||||
10% { -ms-transform: skewX(-8deg); }
|
||||
20% { -ms-transform: skewX(7deg); }
|
||||
30% { -ms-transform: skewX(-6deg); }
|
||||
40% { -ms-transform: skewX(5deg); }
|
||||
50% { -ms-transform: skewX(-4deg); }
|
||||
60% { -ms-transform: skewX(3deg); }
|
||||
70% { -ms-transform: skewX(-2deg); }
|
||||
80% { -ms-transform: skewX(1deg); }
|
||||
90% { -ms-transform: skewX(0deg); }
|
||||
100% { -ms-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-o-keyframes vibrate {
|
||||
0% { -o-transform: skewX(9deg); }
|
||||
10% { -o-transform: skewX(-8deg); }
|
||||
20% { -o-transform: skewX(7deg); }
|
||||
30% { -o-transform: skewX(-6deg); }
|
||||
40% { -o-transform: skewX(5deg); }
|
||||
50% { -o-transform: skewX(-4deg); }
|
||||
60% { -o-transform: skewX(3deg); }
|
||||
70% { -o-transform: skewX(-2deg); }
|
||||
80% { -o-transform: skewX(1deg); }
|
||||
90% { -o-transform: skewX(0deg); }
|
||||
100% { -o-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@keyframes vibrate {
|
||||
0% { transform: skewX(9deg); }
|
||||
10% { transform: skewX(-8deg); }
|
||||
20% { transform: skewX(7deg); }
|
||||
30% { transform: skewX(-6deg); }
|
||||
40% { transform: skewX(5deg); }
|
||||
50% { transform: skewX(-4deg); }
|
||||
60% { transform: skewX(3deg); }
|
||||
70% { transform: skewX(-2deg); }
|
||||
80% { transform: skewX(1deg); }
|
||||
90% { transform: skewX(0deg); }
|
||||
100% { transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
.vibrate {
|
||||
-webkit-animation-name: vibrate;
|
||||
-moz-animation-name: vibrate;
|
||||
-ms-animation-name: vibrate;
|
||||
-o-animation-name: vibrate;
|
||||
animation-name: vibrate;
|
||||
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-ms-animation-timing-function: ease-in;
|
||||
-o-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
Loading…
Reference in a new issue