Skip to content

Commit fe9fdb7

Browse files
angelorohitangelorohit
committed
ADDED: lightSpeedIn and lightSpeedOut animations.
Signed-off-by: angelorohit <angelorohit@gmail.com>
1 parent eb1ff9f commit fe9fdb7

File tree

3 files changed

+194
-0
lines changed

3 files changed

+194
-0
lines changed

‎animate.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3811,3 +3811,111 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
38113811
-o-animation-name: rollOut;
38123812
animation-name: rollOut;
38133813
}
3814+
3815+
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
3816+
3817+
@-webkit-keyframes lightSpeedIn {
3818+
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3819+
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
3820+
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
3821+
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
3822+
}
3823+
3824+
@-moz-keyframes lightSpeedIn {
3825+
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3826+
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
3827+
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
3828+
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
3829+
}
3830+
3831+
@-ms-keyframes lightSpeedIn {
3832+
0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3833+
60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1; }
3834+
80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1; }
3835+
100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
3836+
}
3837+
3838+
@-o-keyframes lightSpeedIn {
3839+
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3840+
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
3841+
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
3842+
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
3843+
}
3844+
3845+
@keyframes lightSpeedIn {
3846+
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
3847+
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
3848+
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
3849+
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
3850+
}
3851+
3852+
.lightSpeedIn {
3853+
-webkit-animation-name: lightSpeedIn;
3854+
-moz-animation-name: lightSpeedIn;
3855+
-ms-animation-name: lightSpeedIn;
3856+
-o-animation-name: lightSpeedIn;
3857+
animation-name: lightSpeedIn;
3858+
3859+
-webkit-animation-timing-function: ease-out;
3860+
-moz-animation-timing-function: ease-out;
3861+
-ms-animation-timing-function: ease-out;
3862+
-o-animation-timing-function: ease-out;
3863+
animation-timing-function: ease-out;
3864+
}
3865+
3866+
.animated.lightSpeedIn {
3867+
-webkit-animation-duration: 0.5s;
3868+
-moz-animation-duration: 0.5s;
3869+
-ms-animation-duration: 0.5s;
3870+
-o-animation-duration: 0.5s;
3871+
animation-duration: 0.5s;
3872+
}
3873+
3874+
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
3875+
3876+
@-webkit-keyframes lightSpeedOut {
3877+
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
3878+
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3879+
}
3880+
3881+
@-moz-keyframes lightSpeedOut {
3882+
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
3883+
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3884+
}
3885+
3886+
@-ms-keyframes lightSpeedOut {
3887+
0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
3888+
100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3889+
}
3890+
3891+
@-o-keyframes lightSpeedOut {
3892+
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
3893+
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
3894+
}
3895+
3896+
@keyframes lightSpeedOut {
3897+
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
3898+
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
3899+
}
3900+
3901+
.lightSpeedOut {
3902+
-webkit-animation-name: lightSpeedOut;
3903+
-moz-animation-name: lightSpeedOut;
3904+
-ms-animation-name: lightSpeedOut;
3905+
-o-animation-name: lightSpeedOut;
3906+
animation-name: lightSpeedOut;
3907+
3908+
-webkit-animation-timing-function: ease-in;
3909+
-moz-animation-timing-function: ease-in;
3910+
-ms-animation-timing-function: ease-in;
3911+
-o-animation-timing-function: ease-in;
3912+
animation-timing-function: ease-in;
3913+
}
3914+
3915+
.animated.lightSpeedOut {
3916+
-webkit-animation-duration: 0.25s;
3917+
-moz-animation-duration: 0.25s;
3918+
-ms-animation-duration: 0.25s;
3919+
-o-animation-duration: 0.25s;
3920+
animation-duration: 0.25s;
3921+
}

‎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+
}

0 commit comments

Comments
 (0)