Skip to content

Commit e3a4313

Browse files
author
Jare Fagbemi
committed
Adjusted zoomInUp and zoomInDown, re-added up/down zooms
1 parent 0e5aacd commit e3a4313

File tree

7 files changed

+249
-3
lines changed

7 files changed

+249
-3
lines changed

‎animate-config.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,14 +99,18 @@
9999

100100
"zooming_entrances": {
101101
"zoomIn": true,
102+
"zoomInDown": true,
102103
"zoomInLeft": true,
103-
"zoomInRight": true
104+
"zoomInRight": true,
105+
"zoomInUp": true
104106
},
105107

106108
"zooming_exits": {
107109
"zoomOut": true,
110+
"zoomOutDown": true,
108111
"zoomOutLeft": true,
109-
"zoomOutRight": true
112+
"zoomOutRight": true,
113+
"zoomOutUp": true
110114
}
111115

112116
}

‎animate.css‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2909,6 +2909,49 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
29092909
animation-name: zoomIn;
29102910
}
29112911

2912+
@-webkit-keyframes zoomInDown {
2913+
0% {
2914+
opacity: 0;
2915+
-webkit-transform: scale(.1) translateY(-2000px);
2916+
transform: scale(.1) translateY(-2000px);
2917+
-webkit-animation-timing-function: ease-in-out;
2918+
animation-timing-function: ease-in-out;
2919+
}
2920+
2921+
60% {
2922+
opacity: 1;
2923+
-webkit-transform: scale(.475) translateY(60px);
2924+
transform: scale(.475) translateY(60px);
2925+
-webkit-animation-timing-function: ease-out;
2926+
animation-timing-function: ease-out;
2927+
}
2928+
}
2929+
2930+
@keyframes zoomInDown {
2931+
0% {
2932+
opacity: 0;
2933+
-webkit-transform: scale(.1) translateY(-2000px);
2934+
-ms-transform: scale(.1) translateY(-2000px);
2935+
transform: scale(.1) translateY(-2000px);
2936+
-webkit-animation-timing-function: ease-in-out;
2937+
animation-timing-function: ease-in-out;
2938+
}
2939+
2940+
60% {
2941+
opacity: 1;
2942+
-webkit-transform: scale(.475) translateY(60px);
2943+
-ms-transform: scale(.475) translateY(60px);
2944+
transform: scale(.475) translateY(60px);
2945+
-webkit-animation-timing-function: ease-out;
2946+
animation-timing-function: ease-out;
2947+
}
2948+
}
2949+
2950+
.zoomInDown {
2951+
-webkit-animation-name: zoomInDown;
2952+
animation-name: zoomInDown;
2953+
}
2954+
29122955
@-webkit-keyframes zoomInLeft {
29132956
0% {
29142957
opacity: 0;
@@ -2995,6 +3038,49 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
29953038
animation-name: zoomInRight;
29963039
}
29973040

3041+
@-webkit-keyframes zoomInUp {
3042+
0% {
3043+
opacity: 0;
3044+
-webkit-transform: scale(.1) translateY(2000px);
3045+
transform: scale(.1) translateY(2000px);
3046+
-webkit-animation-timing-function: ease-in-out;
3047+
animation-timing-function: ease-in-out;
3048+
}
3049+
3050+
60% {
3051+
opacity: 1;
3052+
-webkit-transform: scale(.475) translateY(-60px);
3053+
transform: scale(.475) translateY(-60px);
3054+
-webkit-animation-timing-function: ease-out;
3055+
animation-timing-function: ease-out;
3056+
}
3057+
}
3058+
3059+
@keyframes zoomInUp {
3060+
0% {
3061+
opacity: 0;
3062+
-webkit-transform: scale(.1) translateY(2000px);
3063+
-ms-transform: scale(.1) translateY(2000px);
3064+
transform: scale(.1) translateY(2000px);
3065+
-webkit-animation-timing-function: ease-in-out;
3066+
animation-timing-function: ease-in-out;
3067+
}
3068+
3069+
60% {
3070+
opacity: 1;
3071+
-webkit-transform: scale(.475) translateY(-60px);
3072+
-ms-transform: scale(.475) translateY(-60px);
3073+
transform: scale(.475) translateY(-60px);
3074+
-webkit-animation-timing-function: ease-out;
3075+
animation-timing-function: ease-out;
3076+
}
3077+
}
3078+
3079+
.zoomInUp {
3080+
-webkit-animation-name: zoomInUp;
3081+
animation-name: zoomInUp;
3082+
}
3083+
29983084
@-webkit-keyframes zoomOut {
29993085
0% {
30003086
opacity: 1;
@@ -3038,6 +3124,50 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
30383124
animation-name: zoomOut;
30393125
}
30403126

3127+
@-webkit-keyframes zoomOutDown {
3128+
40% {
3129+
opacity: 1;
3130+
-webkit-transform: scale(.475) translateY(-60px);
3131+
transform: scale(.475) translateY(-60px);
3132+
-webkit-animation-timing-function: linear;
3133+
animation-timing-function: linear;
3134+
}
3135+
3136+
100% {
3137+
opacity: 0;
3138+
-webkit-transform: scale(.1) translateY(2000px);
3139+
transform: scale(.1) translateY(2000px);
3140+
-webkit-transform-origin: center bottom;
3141+
transform-origin: center bottom;
3142+
}
3143+
}
3144+
3145+
@keyframes zoomOutDown {
3146+
40% {
3147+
opacity: 1;
3148+
-webkit-transform: scale(.475) translateY(-60px);
3149+
-ms-transform: scale(.475) translateY(-60px);
3150+
transform: scale(.475) translateY(-60px);
3151+
-webkit-animation-timing-function: linear;
3152+
animation-timing-function: linear;
3153+
}
3154+
3155+
100% {
3156+
opacity: 0;
3157+
-webkit-transform: scale(.1) translateY(2000px);
3158+
-ms-transform: scale(.1) translateY(2000px);
3159+
transform: scale(.1) translateY(2000px);
3160+
-webkit-transform-origin: center bottom;
3161+
-ms-transform-origin: center bottom;
3162+
transform-origin: center bottom;
3163+
}
3164+
}
3165+
3166+
.zoomOutDown {
3167+
-webkit-animation-name: zoomOutDown;
3168+
animation-name: zoomOutDown;
3169+
}
3170+
30413171
@-webkit-keyframes zoomOutLeft {
30423172
40% {
30433173
opacity: 1;
@@ -3124,4 +3254,48 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
31243254
.zoomOutRight {
31253255
-webkit-animation-name: zoomOutRight;
31263256
animation-name: zoomOutRight;
3257+
}
3258+
3259+
@-webkit-keyframes zoomOutUp {
3260+
40% {
3261+
opacity: 1;
3262+
-webkit-transform: scale(.475) translateY(60px);
3263+
transform: scale(.475) translateY(60px);
3264+
-webkit-animation-timing-function: linear;
3265+
animation-timing-function: linear;
3266+
}
3267+
3268+
100% {
3269+
opacity: 0;
3270+
-webkit-transform: scale(.1) translateY(-2000px);
3271+
transform: scale(.1) translateY(-2000px);
3272+
-webkit-transform-origin: center top;
3273+
transform-origin: center top;
3274+
}
3275+
}
3276+
3277+
@keyframes zoomOutUp {
3278+
40% {
3279+
opacity: 1;
3280+
-webkit-transform: scale(.475) translateY(60px);
3281+
-ms-transform: scale(.475) translateY(60px);
3282+
transform: scale(.475) translateY(60px);
3283+
-webkit-animation-timing-function: linear;
3284+
animation-timing-function: linear;
3285+
}
3286+
3287+
100% {
3288+
opacity: 0;
3289+
-webkit-transform: scale(.1) translateY(-2000px);
3290+
-ms-transform: scale(.1) translateY(-2000px);
3291+
transform: scale(.1) translateY(-2000px);
3292+
-webkit-transform-origin: center top;
3293+
-ms-transform-origin: center top;
3294+
transform-origin: center top;
3295+
}
3296+
}
3297+
3298+
.zoomOutUp {
3299+
-webkit-animation-name: zoomOutUp;
3300+
animation-name: zoomOutUp;
31273301
}

‎animate.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/zooming_entrances/zoomInDown.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@keyframes zoomInDown {
2+
0% {
3+
opacity: 0;
4+
transform: scale(.1) translateY(-2000px);
5+
animation-timing-function: ease-in-out;
6+
}
7+
8+
60% {
9+
opacity: 1;
10+
transform: scale(.475) translateY(60px);
11+
animation-timing-function: ease-out;
12+
}
13+
}
14+
15+
.zoomInDown {
16+
animation-name: zoomInDown;
17+
}

‎source/zooming_entrances/zoomInUp.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@keyframes zoomInUp {
2+
0% {
3+
opacity: 0;
4+
transform: scale(.1) translateY(2000px);
5+
animation-timing-function: ease-in-out;
6+
}
7+
8+
60% {
9+
opacity: 1;
10+
transform: scale(.475) translateY(-60px);
11+
animation-timing-function: ease-out;
12+
}
13+
}
14+
15+
.zoomInUp {
16+
animation-name: zoomInUp;
17+
}

‎source/zooming_exits/zoomOutDown.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@keyframes zoomOutDown {
2+
40% {
3+
opacity: 1;
4+
transform: scale(.475) translateY(-60px);
5+
animation-timing-function: linear;
6+
}
7+
8+
100% {
9+
opacity: 0;
10+
transform: scale(.1) translateY(2000px);
11+
transform-origin: center bottom;
12+
}
13+
}
14+
15+
.zoomOutDown {
16+
animation-name: zoomOutDown;
17+
}

‎source/zooming_exits/zoomOutUp.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@keyframes zoomOutUp {
2+
40% {
3+
opacity: 1;
4+
transform: scale(.475) translateY(60px);
5+
animation-timing-function: linear;
6+
}
7+
8+
100% {
9+
opacity: 0;
10+
transform: scale(.1) translateY(-2000px);
11+
transform-origin: center top;
12+
}
13+
}
14+
15+
.zoomOutUp {
16+
animation-name: zoomOutUp;
17+
}

0 commit comments

Comments
 (0)