mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-17 17:45:17 +01:00
Added zooming entrances, zooming exits, slideInUp and slideOutDown.
This commit is contained in:
Andrew Deniszczyc
parent
b76b02acbd
commit
63406ca839
3 changed files with 516 additions and 3 deletions
498
animate.css
vendored
Normal file → Executable file
498
animate.css
vendored
Normal file → Executable file
|
|
@ -20,6 +20,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
|
|
@ -2630,6 +2635,74 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||
animation-name: slideOutUp;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000px);
|
||||
transform: translateY(2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000px);
|
||||
-ms-transform: translateY(2000px);
|
||||
transform: translateY(2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slideInUp {
|
||||
-webkit-animation-name: slideInUp;
|
||||
animation-name: slideInUp;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideOutDown {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000px);
|
||||
transform: translateY(2000px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutDown {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000px);
|
||||
-ms-transform: translateY(2000px);
|
||||
transform: translateY(2000px);
|
||||
}
|
||||
}
|
||||
|
||||
.slideOutDown {
|
||||
-webkit-animation-name: slideOutDown;
|
||||
animation-name: slideOutDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes hinge {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
|
|
@ -2661,11 +2734,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||
80% {
|
||||
-webkit-transform: rotate(60deg) translateY(0);
|
||||
transform: rotate(60deg) translateY(0);
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
|
@ -2713,12 +2786,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||
-webkit-transform: rotate(60deg) translateY(0);
|
||||
-ms-transform: rotate(60deg) translateY(0);
|
||||
transform: rotate(60deg) translateY(0);
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: top left;
|
||||
-ms-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
|
@ -2806,4 +2879,425 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||
.rollOut {
|
||||
-webkit-animation-name: rollOut;
|
||||
animation-name: rollOut;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
-ms-transform: scale(.3);
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomIn {
|
||||
-webkit-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 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.1) translateX(-2000px);
|
||||
transform: scale(.1) translateX(-2000px);
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(.475) translateX(48px);
|
||||
transform: scale(.475) translateX(48px);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.1) translateX(-2000px);
|
||||
-ms-transform: scale(.1) translateX(-2000px);
|
||||
transform: scale(.1) translateX(-2000px);
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(.475) translateX(48px);
|
||||
-ms-transform: scale(.475) translateX(48px);
|
||||
transform: scale(.475) translateX(48px);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInLeft {
|
||||
-webkit-animation-name: zoomInLeft;
|
||||
animation-name: zoomInLeft;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoomInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.1) translateX(2000px);
|
||||
transform: scale(.1) translateX(2000px);
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(.475) translateX(-48px);
|
||||
transform: scale(.475) translateX(-48px);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.1) translateX(2000px);
|
||||
-ms-transform: scale(.1) translateX(2000px);
|
||||
transform: scale(.1) translateX(2000px);
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(.475) translateX(-48px);
|
||||
-ms-transform: scale(.475) translateX(-48px);
|
||||
transform: scale(.475) translateX(-48px);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInRight {
|
||||
-webkit-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 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
-ms-transform: scale(.3);
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomOut {
|
||||
-webkit-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 {
|
||||
40% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(.475) translateX(42px);
|
||||
transform: scale(.475) translateX(42px);
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.1) translateX(-2000px);
|
||||
transform: scale(.1) translateX(-2000px);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOutLeft {
|
||||
40% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(.475) translateX(42px);
|
||||
-ms-transform: scale(.475) translateX(42px);
|
||||
transform: scale(.475) translateX(42px);
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.1) translateX(-2000px);
|
||||
-ms-transform: scale(.1) translateX(-2000px);
|
||||
transform: scale(.1) translateX(-2000px);
|
||||
-webkit-transform-origin: left center;
|
||||
-ms-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomOutLeft {
|
||||
-webkit-animation-name: zoomOutLeft;
|
||||
animation-name: zoomOutLeft;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoomOutRight {
|
||||
40% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(.475) translateX(-42px);
|
||||
transform: scale(.475) translateX(-42px);
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.1) translateX(2000px);
|
||||
transform: scale(.1) translateX(2000px);
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomOutRight {
|
||||
40% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(.475) translateX(-42px);
|
||||
-ms-transform: scale(.475) translateX(-42px);
|
||||
transform: scale(.475) translateX(-42px);
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.1) translateX(2000px);
|
||||
-ms-transform: scale(.1) translateX(2000px);
|
||||
transform: scale(.1) translateX(2000px);
|
||||
-webkit-transform-origin: right center;
|
||||
-ms-transform-origin: right center;
|
||||
transform-origin: right center;
|
||||
}
|
||||
}
|
||||
|
||||
.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
Normal file → Executable file
2
animate.min.css
vendored
Normal file → Executable file
File diff suppressed because one or more lines are too long
19
index.html
19
index.html
|
|
@ -109,6 +109,8 @@
|
|||
<option value="slideInDown">slideInDown</option>
|
||||
<option value="slideInLeft">slideInLeft</option>
|
||||
<option value="slideInRight">slideInRight</option>
|
||||
<option value="slideInUp">slideInUp</option>
|
||||
<option value="slideOutDown">slideOutDown</option>
|
||||
<option value="slideOutLeft">slideOutLeft</option>
|
||||
<option value="slideOutRight">slideOutRight</option>
|
||||
<option value="slideOutUp">slideOutUp</option>
|
||||
|
|
@ -119,6 +121,23 @@
|
|||
<option value="rollIn">rollIn</option>
|
||||
<option value="rollOut">rollOut</option>
|
||||
</optgroup>
|
||||
|
||||
<optgroup label="Zooming Entrances">
|
||||
<option value="zoomIn">zoomIn</option>
|
||||
<option value="zoomInDown">zoomInDown</option>
|
||||
<option value="zoomInLeft">zoomInLeft</option>
|
||||
<option value="zoomInRight">zoomInRight</option>
|
||||
<option value="zoomInUp">zoomInUp</option>
|
||||
</optgroup>
|
||||
|
||||
<optgroup label="Zooming Exits">
|
||||
<option value="zoomOut">zoomOut</option>
|
||||
<option value="zoomOutDown">zoomOutDown</option>
|
||||
<option value="zoomOutLeft">zoomOutLeft</option>
|
||||
<option value="zoomOutRight">zoomOutRight</option>
|
||||
<option value="zoomOutUp">zoomOutUp</option>
|
||||
</optgroup>
|
||||
|
||||
</select>
|
||||
|
||||
<button class="butt js--triggerAnimation">Animate it</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue