Robot/animate.css
1
0
Fork 0
mirror of https://github.com/animate-css/animate.css.git synced 2024-11-13 07:41:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

Adjusted zoomInUp and zoomInDown, re-added up/down zooms

Browse source
This commit is contained in:
Jare Fagbemi 2014-04-25 14:36:18 -07:00
parent 0e5aacd282
commit e3a4313c88
7 changed files with 249 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
animate-config.json
View file

@ -99,14 +99,18 @@
"zooming_entrances": {
"zoomIn": true,
"zoomInDown": true,
"zoomInLeft": true,
"zoomInRight": true
"zoomInRight": true,
"zoomInUp": true
},
"zooming_exits": {
"zoomOut": true,
"zoomOutDown": true,
"zoomOutLeft": true,
"zoomOutRight": true
"zoomOutRight": true,
"zoomOutUp": true
}
}

174
animate.css vendored
View file

@ -2909,6 +2909,49 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
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 {
0% {
opacity: 0;
@ -2995,6 +3038,49 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
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 {
0% {
opacity: 1;
@ -3038,6 +3124,50 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
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 {
40% {
opacity: 1;
@ -3124,4 +3254,48 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
.zoomOutRight {
-webkit-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
View file

File diff suppressed because one or more lines are too long

17
source/zooming_entrances/zoomInDown.css Normal file
View 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
View 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
View 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
View 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;
}