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

Added new animations: fallIn, fallOut, growUp, shrinkDown, zoomInSpin, zoomOutSpin, spin

Browse source
This commit is contained in:
Aayla Secura 2024-07-08 16:54:02 +03:00
parent 3f8ab233db
commit f4cb244979
7 changed files with 232 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
source/fading_entrances/fallIn.css Normal file
View file

@ -0,0 +1,42 @@
@-webkit-keyframes fallIn {
0% {
opacity: 0;
-webkit-transform: perspective(500px) translate3d(-20%, -20%, 180px) rotate3d(1, 4, 0.5, -8deg);
transform: perspective(500px) translate3d(-20%, -20%, 180px) rotate3d(1, 4, 0.5, -8deg);
}
20% {
opacity: 1;
}
to {
-webkit-transform: perspective(500px) translate3d(0, 0, 0) rotate3d(1, 4, 0.5, 0deg);
transform: perspective(500px) translate3d(0, 0, 0) rotate3d(1, 4, 0.5, 0deg);
}
}
@keyframes fallIn {
0% {
opacity: 0;
-webkit-transform: perspective(500px) translate3d(-20%, -20%, 180px) rotate3d(1, 4, 0.5, -8deg);
transform: perspective(500px) translate3d(-20%, -20%, 180px) rotate3d(1, 4, 0.5, -8deg);
}
20% {
opacity: 1;
}
to {
-webkit-transform: perspective(500px) translate3d(0, 0, 0) rotate3d(1, 4, 0.5, 0deg);
transform: perspective(500px) translate3d(0, 0, 0) rotate3d(1, 4, 0.5, 0deg);
}
}
.animate__fallIn {
-webkit-animation-name: fallIn;
animation-name: fallIn;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: cubic-bezier(.14, .57, .72, 1);
animation-timing-function: cubic-bezier(.14, .57, .72, 1);
}

42
source/fading_exits/fallOut.css Normal file
View file

@ -0,0 +1,42 @@
@-webkit-keyframes fallOut {
0% {
-webkit-transform: perspective(500px) translate3d(0, 0, 0) rotate3d(1, 4, 0.5, 0deg);
transform: perspective(500px) translate3d(0, 0, 0) rotate3d(1, 4, 0.5, 0deg);
}
80% {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: perspective(500px) translate3d(-20%, -20%, 180px) rotate3d(1, 4, 0.5, -8deg);
transform: perspective(500px) translate3d(-20%, -20%, 180px) rotate3d(1, 4, 0.5, -8deg);
}
}
@keyframes fallOut {
0% {
-webkit-transform: perspective(500px) translate3d(0, 0, 0) rotate3d(1, 4, 0.5, 0deg);
transform: perspective(500px) translate3d(0, 0, 0) rotate3d(1, 4, 0.5, 0deg);
}
80% {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: perspective(500px) translate3d(-20%, -20%, 180px) rotate3d(1, 4, 0.5, -8deg);
transform: perspective(500px) translate3d(-20%, -20%, 180px) rotate3d(1, 4, 0.5, -8deg);
}
}
.animate__fallOut {
-webkit-animation-name: fallOut;
animation-name: fallOut;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: cubic-bezier(.14, .57, .72, 1);
animation-timing-function: cubic-bezier(.14, .57, .72, 1);
}

32
source/specials/spin.css Normal file
View file

@ -0,0 +1,32 @@
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animate__spin {
-webkit-animation-name: spin;
animation-name: spin;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}

30
source/zooming_entrances/growUp.css Normal file
View file

@ -0,0 +1,30 @@
@-webkit-keyframes growUp {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes growUp {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.animate__growUp {
-webkit-animation-name: growUp;
animation-name: growUp;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

28
source/zooming_entrances/zoomInSpin.css Normal file
View file

@ -0,0 +1,28 @@
@-webkit-keyframes zoomInSpin {
0% {
-webkit-transform: scale(0) rotate(0deg);
transform: scale(0) rotate(0deg);
}
to {
-webkit-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
@keyframes zoomInSpin {
0% {
-webkit-transform: scale(0) rotate(0deg);
transform: scale(0) rotate(0deg);
}
to {
-webkit-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
.animate__zoomInSpin {
-webkit-animation-name: zoomInSpin;
animation-name: zoomInSpin;
}

30
source/zooming_exits/shrinkDown.css Normal file
View file

@ -0,0 +1,30 @@
@-webkit-keyframes shrinkDown {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes shrinkDown {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(0);
transform: scale(0);
}
}
.animate__shrinkDown {
-webkit-animation-name: shrinkDown;
animation-name: shrinkDown;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

28
source/zooming_exits/zoomOutSpin.css Normal file
View file

@ -0,0 +1,28 @@
@-webkit-keyframes zoomOutSpin {
0% {
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
to {
-webkit-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
}
}
@keyframes zoomOutSpin {
0% {
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
to {
-webkit-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
}
}
.animate__zoomOutSpin {
-webkit-animation-name: zoomOutSpin;
animation-name: zoomOutSpin;
}