ADDED: lightSpeedIn and lightSpeedOut animations.
Signed-off-by: angelorohit <angelorohit@gmail.com>
This commit is contained in:
angelorohit
parent
eb1ff9f94d
commit
fe9fdb7958
|
|
@ -3811,3 +3811,111 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||
-o-animation-name: rollOut;
|
||||
animation-name: rollOut;
|
||||
}
|
||||
|
||||
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
|
||||
|
||||
@-webkit-keyframes lightSpeedIn {
|
||||
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes lightSpeedIn {
|
||||
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-ms-keyframes lightSpeedIn {
|
||||
0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-o-keyframes lightSpeedIn {
|
||||
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes lightSpeedIn {
|
||||
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
.lightSpeedIn {
|
||||
-webkit-animation-name: lightSpeedIn;
|
||||
-moz-animation-name: lightSpeedIn;
|
||||
-ms-animation-name: lightSpeedIn;
|
||||
-o-animation-name: lightSpeedIn;
|
||||
animation-name: lightSpeedIn;
|
||||
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-ms-animation-timing-function: ease-out;
|
||||
-o-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.animated.lightSpeedIn {
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-moz-animation-duration: 0.5s;
|
||||
-ms-animation-duration: 0.5s;
|
||||
-o-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
|
||||
|
||||
@-webkit-keyframes lightSpeedOut {
|
||||
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes lightSpeedOut {
|
||||
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-ms-keyframes lightSpeedOut {
|
||||
0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-o-keyframes lightSpeedOut {
|
||||
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes lightSpeedOut {
|
||||
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.lightSpeedOut {
|
||||
-webkit-animation-name: lightSpeedOut;
|
||||
-moz-animation-name: lightSpeedOut;
|
||||
-ms-animation-name: lightSpeedOut;
|
||||
-o-animation-name: lightSpeedOut;
|
||||
animation-name: lightSpeedOut;
|
||||
|
||||
-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.lightSpeedOut {
|
||||
-webkit-animation-duration: 0.25s;
|
||||
-moz-animation-duration: 0.25s;
|
||||
-ms-animation-duration: 0.25s;
|
||||
-o-animation-duration: 0.25s;
|
||||
animation-duration: 0.25s;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
@-webkit-keyframes lightSpeedIn {
|
||||
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes lightSpeedIn {
|
||||
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-ms-keyframes lightSpeedIn {
|
||||
0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-o-keyframes lightSpeedIn {
|
||||
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes lightSpeedIn {
|
||||
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
.lightSpeedIn {
|
||||
-webkit-animation-name: lightSpeedIn;
|
||||
-moz-animation-name: lightSpeedIn;
|
||||
-ms-animation-name: lightSpeedIn;
|
||||
-o-animation-name: lightSpeedIn;
|
||||
animation-name: lightSpeedIn;
|
||||
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-ms-animation-timing-function: ease-out;
|
||||
-o-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
@-webkit-keyframes lightSpeedOut {
|
||||
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes lightSpeedOut {
|
||||
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-ms-keyframes lightSpeedOut {
|
||||
0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-o-keyframes lightSpeedOut {
|
||||
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes lightSpeedOut {
|
||||
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.lightSpeedOut {
|
||||
-webkit-animation-name: lightSpeedOut;
|
||||
-moz-animation-name: lightSpeedOut;
|
||||
-ms-animation-name: lightSpeedOut;
|
||||
-o-animation-name: lightSpeedOut;
|
||||
animation-name: lightSpeedOut;
|
||||
|
||||
-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 New Issue