mirror of
https://github.com/animate-css/animate.css.git
synced 2024-09-29 14:31:31 +02:00
Adjusted zoomInUp and zoomInDown, re-added up/down zooms
This commit is contained in:
parent
0e5aacd282
commit
e3a4313c88
@ -99,14 +99,18 @@
|
|||||||
|
|
||||||
"zooming_entrances": {
|
"zooming_entrances": {
|
||||||
"zoomIn": true,
|
"zoomIn": true,
|
||||||
|
"zoomInDown": true,
|
||||||
"zoomInLeft": true,
|
"zoomInLeft": true,
|
||||||
"zoomInRight": true
|
"zoomInRight": true,
|
||||||
|
"zoomInUp": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"zooming_exits": {
|
"zooming_exits": {
|
||||||
"zoomOut": true,
|
"zoomOut": true,
|
||||||
|
"zoomOutDown": true,
|
||||||
"zoomOutLeft": true,
|
"zoomOutLeft": true,
|
||||||
"zoomOutRight": true
|
"zoomOutRight": true,
|
||||||
|
"zoomOutUp": true
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
174
animate.css
vendored
174
animate.css
vendored
@ -2909,6 +2909,49 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||||||
animation-name: zoomIn;
|
animation-name: zoomIn;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes zoomInDown {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(.1) translateY(-2000px);
|
||||||
|
transform: scale(.1) translateY(-2000px);
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(.475) translateY(60px);
|
||||||
|
transform: scale(.475) translateY(60px);
|
||||||
|
-webkit-animation-timing-function: ease-out;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes zoomInDown {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(.1) translateY(-2000px);
|
||||||
|
-ms-transform: scale(.1) translateY(-2000px);
|
||||||
|
transform: scale(.1) translateY(-2000px);
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(.475) translateY(60px);
|
||||||
|
-ms-transform: scale(.475) translateY(60px);
|
||||||
|
transform: scale(.475) translateY(60px);
|
||||||
|
-webkit-animation-timing-function: ease-out;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomInDown {
|
||||||
|
-webkit-animation-name: zoomInDown;
|
||||||
|
animation-name: zoomInDown;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes zoomInLeft {
|
@-webkit-keyframes zoomInLeft {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -2995,6 +3038,49 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||||||
animation-name: zoomInRight;
|
animation-name: zoomInRight;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes zoomInUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(.1) translateY(2000px);
|
||||||
|
transform: scale(.1) translateY(2000px);
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(.475) translateY(-60px);
|
||||||
|
transform: scale(.475) translateY(-60px);
|
||||||
|
-webkit-animation-timing-function: ease-out;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes zoomInUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(.1) translateY(2000px);
|
||||||
|
-ms-transform: scale(.1) translateY(2000px);
|
||||||
|
transform: scale(.1) translateY(2000px);
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(.475) translateY(-60px);
|
||||||
|
-ms-transform: scale(.475) translateY(-60px);
|
||||||
|
transform: scale(.475) translateY(-60px);
|
||||||
|
-webkit-animation-timing-function: ease-out;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomInUp {
|
||||||
|
-webkit-animation-name: zoomInUp;
|
||||||
|
animation-name: zoomInUp;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes zoomOut {
|
@-webkit-keyframes zoomOut {
|
||||||
0% {
|
0% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -3038,6 +3124,50 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||||||
animation-name: zoomOut;
|
animation-name: zoomOut;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes zoomOutDown {
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(.475) translateY(-60px);
|
||||||
|
transform: scale(.475) translateY(-60px);
|
||||||
|
-webkit-animation-timing-function: linear;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(.1) translateY(2000px);
|
||||||
|
transform: scale(.1) translateY(2000px);
|
||||||
|
-webkit-transform-origin: center bottom;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes zoomOutDown {
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(.475) translateY(-60px);
|
||||||
|
-ms-transform: scale(.475) translateY(-60px);
|
||||||
|
transform: scale(.475) translateY(-60px);
|
||||||
|
-webkit-animation-timing-function: linear;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(.1) translateY(2000px);
|
||||||
|
-ms-transform: scale(.1) translateY(2000px);
|
||||||
|
transform: scale(.1) translateY(2000px);
|
||||||
|
-webkit-transform-origin: center bottom;
|
||||||
|
-ms-transform-origin: center bottom;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomOutDown {
|
||||||
|
-webkit-animation-name: zoomOutDown;
|
||||||
|
animation-name: zoomOutDown;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes zoomOutLeft {
|
@-webkit-keyframes zoomOutLeft {
|
||||||
40% {
|
40% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -3124,4 +3254,48 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||||||
.zoomOutRight {
|
.zoomOutRight {
|
||||||
-webkit-animation-name: zoomOutRight;
|
-webkit-animation-name: zoomOutRight;
|
||||||
animation-name: zoomOutRight;
|
animation-name: zoomOutRight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes zoomOutUp {
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(.475) translateY(60px);
|
||||||
|
transform: scale(.475) translateY(60px);
|
||||||
|
-webkit-animation-timing-function: linear;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(.1) translateY(-2000px);
|
||||||
|
transform: scale(.1) translateY(-2000px);
|
||||||
|
-webkit-transform-origin: center top;
|
||||||
|
transform-origin: center top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes zoomOutUp {
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(.475) translateY(60px);
|
||||||
|
-ms-transform: scale(.475) translateY(60px);
|
||||||
|
transform: scale(.475) translateY(60px);
|
||||||
|
-webkit-animation-timing-function: linear;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(.1) translateY(-2000px);
|
||||||
|
-ms-transform: scale(.1) translateY(-2000px);
|
||||||
|
transform: scale(.1) translateY(-2000px);
|
||||||
|
-webkit-transform-origin: center top;
|
||||||
|
-ms-transform-origin: center top;
|
||||||
|
transform-origin: center top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomOutUp {
|
||||||
|
-webkit-animation-name: zoomOutUp;
|
||||||
|
animation-name: zoomOutUp;
|
||||||
}
|
}
|
2
animate.min.css
vendored
2
animate.min.css
vendored
File diff suppressed because one or more lines are too long
17
source/zooming_entrances/zoomInDown.css
Normal file
17
source/zooming_entrances/zoomInDown.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
@keyframes zoomInDown {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.1) translateY(-2000px);
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(.475) translateY(60px);
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomInDown {
|
||||||
|
animation-name: zoomInDown;
|
||||||
|
}
|
17
source/zooming_entrances/zoomInUp.css
Normal file
17
source/zooming_entrances/zoomInUp.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
@keyframes zoomInUp {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.1) translateY(2000px);
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(.475) translateY(-60px);
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomInUp {
|
||||||
|
animation-name: zoomInUp;
|
||||||
|
}
|
17
source/zooming_exits/zoomOutDown.css
Normal file
17
source/zooming_exits/zoomOutDown.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
@keyframes zoomOutDown {
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(.475) translateY(-60px);
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.1) translateY(2000px);
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomOutDown {
|
||||||
|
animation-name: zoomOutDown;
|
||||||
|
}
|
17
source/zooming_exits/zoomOutUp.css
Normal file
17
source/zooming_exits/zoomOutUp.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
@keyframes zoomOutUp {
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(.475) translateY(60px);
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.1) translateY(-2000px);
|
||||||
|
transform-origin: center top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomOutUp {
|
||||||
|
animation-name: zoomOutUp;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user