mirror of
https://github.com/animate-css/animate.css.git
synced 2024-09-29 22:41:31 +02:00
Merge pull request #103 from loganbfisher/add_slide_animations
Added slide animations to the source. Good for using with mobile navigational menus.
This commit is contained in:
commit
f0461189bf
50
source/slideInDown.css
Normal file
50
source/slideInDown.css
Normal file
@ -0,0 +1,50 @@
|
||||
@-webkit-keyframes slideInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes slideInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes slideInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInDown {
|
||||
-webkit-animation-name: slideInDown;
|
||||
-moz-animation-name: slideInDown;
|
||||
-o-animation-name: slideInDown;
|
||||
animation-name: slideInDown;
|
||||
}
|
50
source/slideInLeft.css
Normal file
50
source/slideInLeft.css
Normal file
@ -0,0 +1,50 @@
|
||||
@-webkit-keyframes slideInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes slideInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes slideInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateX(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInLeft {
|
||||
-webkit-animation-name: slideInLeft;
|
||||
-moz-animation-name: slideInLeft;
|
||||
-o-animation-name: slideInLeft;
|
||||
animation-name: slideInLeft;
|
||||
}
|
50
source/slideInRight.css
Normal file
50
source/slideInRight.css
Normal file
@ -0,0 +1,50 @@
|
||||
@-webkit-keyframes slideInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes slideInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes slideInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateX(2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInRight {
|
||||
-webkit-animation-name: slideInRight;
|
||||
-moz-animation-name: slideInRight;
|
||||
-o-animation-name: slideInRight;
|
||||
animation-name: slideInRight;
|
||||
}
|
50
source/slideOutLeft.css
Normal file
50
source/slideOutLeft.css
Normal file
@ -0,0 +1,50 @@
|
||||
@-webkit-keyframes slideOutLeft {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes slideOutLeft {
|
||||
0% {
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes slideOutLeft {
|
||||
0% {
|
||||
-o-transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-o-transform: translateX(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
.slideOutLeft {
|
||||
-webkit-animation-name: slideOutLeft;
|
||||
-moz-animation-name: slideOutLeft;
|
||||
-o-animation-name: slideOutLeft;
|
||||
animation-name: slideOutLeft;
|
||||
}
|
50
source/slideOutRight.css
Normal file
50
source/slideOutRight.css
Normal file
@ -0,0 +1,50 @@
|
||||
@-webkit-keyframes slideOutRight {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes slideOutRight {
|
||||
0% {
|
||||
-moz-transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes slideOutRight {
|
||||
0% {
|
||||
-o-transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-o-transform: translateX(2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(2000px);
|
||||
}
|
||||
}
|
||||
|
||||
.slideOutRight {
|
||||
-webkit-animation-name: slideOutRight;
|
||||
-moz-animation-name: slideOutRight;
|
||||
-o-animation-name: slideOutRight;
|
||||
animation-name: slideOutRight;
|
||||
}
|
50
source/slideOutUp.css
Normal file
50
source/slideOutUp.css
Normal file
@ -0,0 +1,50 @@
|
||||
@-webkit-keyframes slideOutUp {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes slideOutUp {
|
||||
0% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes slideOutUp {
|
||||
0% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutUp {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
.slideOutUp {
|
||||
-webkit-animation-name: slideOutUp;
|
||||
-moz-animation-name: slideOutUp;
|
||||
-o-animation-name: slideOutUp;
|
||||
animation-name: slideOutUp;
|
||||
}
|
Loading…
Reference in New Issue
Block a user