Skip to content

Commit 5c1cfb2

Browse files
danedendaneden
committed
Merge pull request animate-css#29 from angelorohit/master
Added new animations lightSpeedIn, lightSpeedOut, wiggle
2 parents be2e0d6 + a7f45ca commit 5c1cfb2

File tree

4 files changed

+371
-0
lines changed

4 files changed

+371
-0
lines changed

‎animate.css‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3828,3 +3828,205 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
38283828
-o-animation-name: rollOut;
38293829
animation-name: rollOut;
38303830
}
3831+
3832+
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
3833+
3834+
@-webkit-keyframes lightSpeedIn {
3835+
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3836+
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
3837+
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
3838+
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
3839+
}
3840+
3841+
@-moz-keyframes lightSpeedIn {
3842+
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3843+
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
3844+
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
3845+
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
3846+
}
3847+
3848+
@-ms-keyframes lightSpeedIn {
3849+
0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3850+
60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1; }
3851+
80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1; }
3852+
100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
3853+
}
3854+
3855+
@-o-keyframes lightSpeedIn {
3856+
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3857+
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
3858+
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
3859+
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
3860+
}
3861+
3862+
@keyframes lightSpeedIn {
3863+
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
3864+
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
3865+
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
3866+
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
3867+
}
3868+
3869+
.lightSpeedIn {
3870+
-webkit-animation-name: lightSpeedIn;
3871+
-moz-animation-name: lightSpeedIn;
3872+
-ms-animation-name: lightSpeedIn;
3873+
-o-animation-name: lightSpeedIn;
3874+
animation-name: lightSpeedIn;
3875+
3876+
-webkit-animation-timing-function: ease-out;
3877+
-moz-animation-timing-function: ease-out;
3878+
-ms-animation-timing-function: ease-out;
3879+
-o-animation-timing-function: ease-out;
3880+
animation-timing-function: ease-out;
3881+
}
3882+
3883+
.animated.lightSpeedIn {
3884+
-webkit-animation-duration: 0.5s;
3885+
-moz-animation-duration: 0.5s;
3886+
-ms-animation-duration: 0.5s;
3887+
-o-animation-duration: 0.5s;
3888+
animation-duration: 0.5s;
3889+
}
3890+
3891+
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
3892+
3893+
@-webkit-keyframes lightSpeedOut {
3894+
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
3895+
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3896+
}
3897+
3898+
@-moz-keyframes lightSpeedOut {
3899+
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
3900+
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3901+
}
3902+
3903+
@-ms-keyframes lightSpeedOut {
3904+
0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
3905+
100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3906+
}
3907+
3908+
@-o-keyframes lightSpeedOut {
3909+
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
3910+
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3911+
}
3912+
3913+
@keyframes lightSpeedOut {
3914+
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
3915+
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
3916+
}
3917+
3918+
.lightSpeedOut {
3919+
-webkit-animation-name: lightSpeedOut;
3920+
-moz-animation-name: lightSpeedOut;
3921+
-ms-animation-name: lightSpeedOut;
3922+
-o-animation-name: lightSpeedOut;
3923+
animation-name: lightSpeedOut;
3924+
3925+
-webkit-animation-timing-function: ease-in;
3926+
-moz-animation-timing-function: ease-in;
3927+
-ms-animation-timing-function: ease-in;
3928+
-o-animation-timing-function: ease-in;
3929+
animation-timing-function: ease-in;
3930+
}
3931+
3932+
.animated.lightSpeedOut {
3933+
-webkit-animation-duration: 0.25s;
3934+
-moz-animation-duration: 0.25s;
3935+
-ms-animation-duration: 0.25s;
3936+
-o-animation-duration: 0.25s;
3937+
animation-duration: 0.25s;
3938+
}
3939+
3940+
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
3941+
3942+
@-webkit-keyframes wiggle {
3943+
0% { -webkit-transform: skewX(9deg); }
3944+
10% { -webkit-transform: skewX(-8deg); }
3945+
20% { -webkit-transform: skewX(7deg); }
3946+
30% { -webkit-transform: skewX(-6deg); }
3947+
40% { -webkit-transform: skewX(5deg); }
3948+
50% { -webkit-transform: skewX(-4deg); }
3949+
60% { -webkit-transform: skewX(3deg); }
3950+
70% { -webkit-transform: skewX(-2deg); }
3951+
80% { -webkit-transform: skewX(1deg); }
3952+
90% { -webkit-transform: skewX(0deg); }
3953+
100% { -webkit-transform: skewX(0deg); }
3954+
}
3955+
3956+
@-moz-keyframes wiggle {
3957+
0% { -moz-transform: skewX(9deg); }
3958+
10% { -moz-transform: skewX(-8deg); }
3959+
20% { -moz-transform: skewX(7deg); }
3960+
30% { -moz-transform: skewX(-6deg); }
3961+
40% { -moz-transform: skewX(5deg); }
3962+
50% { -moz-transform: skewX(-4deg); }
3963+
60% { -moz-transform: skewX(3deg); }
3964+
70% { -moz-transform: skewX(-2deg); }
3965+
80% { -moz-transform: skewX(1deg); }
3966+
90% { -moz-transform: skewX(0deg); }
3967+
100% { -moz-transform: skewX(0deg); }
3968+
}
3969+
3970+
@-ms-keyframes wiggle {
3971+
0% { -ms-transform: skewX(9deg); }
3972+
10% { -ms-transform: skewX(-8deg); }
3973+
20% { -ms-transform: skewX(7deg); }
3974+
30% { -ms-transform: skewX(-6deg); }
3975+
40% { -ms-transform: skewX(5deg); }
3976+
50% { -ms-transform: skewX(-4deg); }
3977+
60% { -ms-transform: skewX(3deg); }
3978+
70% { -ms-transform: skewX(-2deg); }
3979+
80% { -ms-transform: skewX(1deg); }
3980+
90% { -ms-transform: skewX(0deg); }
3981+
100% { -ms-transform: skewX(0deg); }
3982+
}
3983+
3984+
@-o-keyframes wiggle {
3985+
0% { -o-transform: skewX(9deg); }
3986+
10% { -o-transform: skewX(-8deg); }
3987+
20% { -o-transform: skewX(7deg); }
3988+
30% { -o-transform: skewX(-6deg); }
3989+
40% { -o-transform: skewX(5deg); }
3990+
50% { -o-transform: skewX(-4deg); }
3991+
60% { -o-transform: skewX(3deg); }
3992+
70% { -o-transform: skewX(-2deg); }
3993+
80% { -o-transform: skewX(1deg); }
3994+
90% { -o-transform: skewX(0deg); }
3995+
100% { -o-transform: skewX(0deg); }
3996+
}
3997+
3998+
@keyframes wiggle {
3999+
0% { transform: skewX(9deg); }
4000+
10% { transform: skewX(-8deg); }
4001+
20% { transform: skewX(7deg); }
4002+
30% { transform: skewX(-6deg); }
4003+
40% { transform: skewX(5deg); }
4004+
50% { transform: skewX(-4deg); }
4005+
60% { transform: skewX(3deg); }
4006+
70% { transform: skewX(-2deg); }
4007+
80% { transform: skewX(1deg); }
4008+
90% { transform: skewX(0deg); }
4009+
100% { transform: skewX(0deg); }
4010+
}
4011+
4012+
.wiggle {
4013+
-webkit-animation-name: wiggle;
4014+
-moz-animation-name: wiggle;
4015+
-ms-animation-name: wiggle;
4016+
-o-animation-name: wiggle;
4017+
animation-name: wiggle;
4018+
4019+
-webkit-animation-timing-function: ease-in;
4020+
-moz-animation-timing-function: ease-in;
4021+
-ms-animation-timing-function: ease-in;
4022+
-o-animation-timing-function: ease-in;
4023+
animation-timing-function: ease-in;
4024+
}
4025+
4026+
.animated.wiggle {
4027+
-webkit-animation-duration: 0.75s;
4028+
-moz-animation-duration: 0.75s;
4029+
-ms-animation-duration: 0.75s;
4030+
-o-animation-duration: 0.75s;
4031+
animation-duration: 0.75s;
4032+
}

‎source/lightSpeedIn.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@-webkit-keyframes lightSpeedIn {
2+
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3+
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
4+
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
5+
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
6+
}
7+
8+
@-moz-keyframes lightSpeedIn {
9+
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
10+
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
11+
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
12+
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
13+
}
14+
15+
@-ms-keyframes lightSpeedIn {
16+
0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
17+
60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1; }
18+
80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1; }
19+
100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
20+
}
21+
22+
@-o-keyframes lightSpeedIn {
23+
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
24+
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
25+
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
26+
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
27+
}
28+
29+
@keyframes lightSpeedIn {
30+
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
31+
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
32+
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
33+
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
34+
}
35+
36+
.lightSpeedIn {
37+
-webkit-animation-name: lightSpeedIn;
38+
-moz-animation-name: lightSpeedIn;
39+
-ms-animation-name: lightSpeedIn;
40+
-o-animation-name: lightSpeedIn;
41+
animation-name: lightSpeedIn;
42+
43+
-webkit-animation-timing-function: ease-out;
44+
-moz-animation-timing-function: ease-out;
45+
-ms-animation-timing-function: ease-out;
46+
-o-animation-timing-function: ease-out;
47+
animation-timing-function: ease-out;
48+
}

‎source/lightSpeedOut.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@-webkit-keyframes lightSpeedOut {
2+
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
3+
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
4+
}
5+
6+
@-moz-keyframes lightSpeedOut {
7+
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
8+
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
9+
}
10+
11+
@-ms-keyframes lightSpeedOut {
12+
0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
13+
100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
14+
}
15+
16+
@-o-keyframes lightSpeedOut {
17+
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
18+
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
19+
}
20+
21+
@keyframes lightSpeedOut {
22+
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
23+
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
24+
}
25+
26+
.lightSpeedOut {
27+
-webkit-animation-name: lightSpeedOut;
28+
-moz-animation-name: lightSpeedOut;
29+
-ms-animation-name: lightSpeedOut;
30+
-o-animation-name: lightSpeedOut;
31+
animation-name: lightSpeedOut;
32+
33+
-webkit-animation-timing-function: ease-in;
34+
-moz-animation-timing-function: ease-in;
35+
-ms-animation-timing-function: ease-in;
36+
-o-animation-timing-function: ease-in;
37+
animation-timing-function: ease-in;
38+
}

‎source/wiggle.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@-webkit-keyframes wiggle {
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 wiggle {
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 wiggle {
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 wiggle {
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 wiggle {
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+
.wiggle {
72+
-webkit-animation-name: wiggle;
73+
-moz-animation-name: wiggle;
74+
-ms-animation-name: wiggle;
75+
-o-animation-name: wiggle;
76+
animation-name: wiggle;
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)