Add flip animations
This commit is contained in:
Dan Eden
parent
a73a879d51
commit
0b7b84d470
123
source/flip.css
Normal file
123
source/flip.css
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
@-webkit-keyframes flip {
|
||||
0% {
|
||||
-webkit-transform: perspective(400px) rotateY(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(400px) scale(1);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes flip {
|
||||
0% {
|
||||
-moz-transform: perspective(400px) rotateY(0);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||||
-moz-animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
|
||||
-moz-animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: perspective(400px) scale(1);
|
||||
-moz-animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes flip {
|
||||
0% {
|
||||
-ms-transform: perspective(400px) rotateY(0);
|
||||
-ms-animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg);
|
||||
-ms-animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||||
-ms-animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
-ms-transform: perspective(400px) rotateY(360deg) scale(.95);
|
||||
-ms-animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
-ms-transform: perspective(400px) scale(1);
|
||||
-ms-animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
@-o-keyframes flip {
|
||||
0% {
|
||||
-o-transform: perspective(400px) rotateY(0);
|
||||
-o-animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
|
||||
-o-animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||||
-o-animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
-o-transform: perspective(400px) rotateY(360deg) scale(.95);
|
||||
-o-animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
-o-transform: perspective(400px) scale(1);
|
||||
-o-animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
@keyframes flip {
|
||||
0% {
|
||||
transform: perspective(400px) rotateY(0);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
transform: perspective(400px) translateZ(150px) rotateY(170deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
transform: perspective(400px) rotateY(360deg) scale(.95);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
transform: perspective(400px) scale(1);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.flip {
|
||||
-webkit-backface-visibility: visible !important;
|
||||
-webkit-animation-name: flip;
|
||||
-moz-backface-visibility: visible !important;
|
||||
-moz-animation-name: flip;
|
||||
-ms-backface-visibility: visible !important;
|
||||
-ms-animation-name: flip;
|
||||
-o-backface-visibility: visible !important;
|
||||
-o-animation-name: flip;
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flip;
|
||||
}
|
||||
108
source/flipInX.css
Normal file
108
source/flipInX.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
@-webkit-keyframes flipInX {
|
||||
0% {
|
||||
-webkit-transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: perspective(400px) rotateX(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: perspective(400px) rotateX(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes flipInX {
|
||||
0% {
|
||||
-moz-transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-moz-transform: perspective(400px) rotateX(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-moz-transform: perspective(400px) rotateX(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes flipInX {
|
||||
0% {
|
||||
-ms-transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-ms-transform: perspective(400px) rotateX(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-ms-transform: perspective(400px) rotateX(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-ms-transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-o-keyframes flipInX {
|
||||
0% {
|
||||
-o-transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-o-transform: perspective(400px) rotateX(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-o-transform: perspective(400px) rotateX(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes flipInX {
|
||||
0% {
|
||||
transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotateX(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: perspective(400px) rotateX(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flipInX {
|
||||
-webkit-backface-visibility: visible !important;
|
||||
-webkit-animation-name: flipInX;
|
||||
-moz-backface-visibility: visible !important;
|
||||
-moz-animation-name: flipInX;
|
||||
-ms-backface-visibility: visible !important;
|
||||
-ms-animation-name: flipInX;
|
||||
-o-backface-visibility: visible !important;
|
||||
-o-animation-name: flipInX;
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipInX;
|
||||
}
|
||||
108
source/flipInY.css
Normal file
108
source/flipInY.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
@-webkit-keyframes flipInY {
|
||||
0% {
|
||||
-webkit-transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: perspective(400px) rotateY(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: perspective(400px) rotateY(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes flipInY {
|
||||
0% {
|
||||
-moz-transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-moz-transform: perspective(400px) rotateY(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-moz-transform: perspective(400px) rotateY(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes flipInY {
|
||||
0% {
|
||||
-ms-transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-ms-transform: perspective(400px) rotateY(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-ms-transform: perspective(400px) rotateY(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-ms-transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-o-keyframes flipInY {
|
||||
0% {
|
||||
-o-transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-o-transform: perspective(400px) rotateY(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
-o-transform: perspective(400px) rotateY(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes flipInY {
|
||||
0% {
|
||||
transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotateY(-10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: perspective(400px) rotateY(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flipInY {
|
||||
-webkit-backface-visibility: visible !important;
|
||||
-webkit-animation-name: flipInY;
|
||||
-moz-backface-visibility: visible !important;
|
||||
-moz-animation-name: flipInY;
|
||||
-ms-backface-visibility: visible !important;
|
||||
-ms-animation-name: flipInY;
|
||||
-o-backface-visibility: visible !important;
|
||||
-o-animation-name: flipInY;
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipInY;
|
||||
}
|
||||
67
source/flipOutX.css
Normal file
67
source/flipOutX.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
@-webkit-keyframes flipOutX {
|
||||
0% {
|
||||
-webkit-transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes flipOutX {
|
||||
0% {
|
||||
-moz-transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes flipOutX {
|
||||
0% {
|
||||
-ms-transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-ms-transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes flipOutX {
|
||||
0% {
|
||||
-o-transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-o-transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flipOutX {
|
||||
0% {
|
||||
transform: perspective(400px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: perspective(400px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipOutX {
|
||||
-webkit-animation-name: flipOutX;
|
||||
-webkit-backface-visibility: visible !important;
|
||||
-moz-animation-name: flipOutX;
|
||||
-moz-backface-visibility: visible !important;
|
||||
-ms-animation-name: flipOutX;
|
||||
-ms-backface-visibility: visible !important;
|
||||
-o-animation-name: flipOutX;
|
||||
-o-backface-visibility: visible !important;
|
||||
animation-name: flipOutX;
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
63
source/flipOutY.css
Normal file
63
source/flipOutY.css
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@-webkit-keyframes flipOutY {
|
||||
0% {
|
||||
-webkit-transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes flipOutY {
|
||||
0% {
|
||||
-moz-transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes flipOutY {
|
||||
0% {
|
||||
-ms-transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-ms-transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-o-keyframes flipOutY {
|
||||
0% {
|
||||
-o-transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-o-transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes flipOutY {
|
||||
0% {
|
||||
transform: perspective(400px) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: perspective(400px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipOutY {
|
||||
-webkit-backface-visibility: visible !important;
|
||||
-webkit-animation-name: flipOutY;
|
||||
-moz-backface-visibility: visible !important;
|
||||
-moz-animation-name: flipOutY;
|
||||
-ms-backface-visibility: visible !important;
|
||||
-ms-animation-name: flipOutY;
|
||||
-o-backface-visibility: visible !important;
|
||||
-o-animation-name: flipOutY;
|
||||
backface-visibility: visible !important;
|
||||
animation-name: flipOutY;
|
||||
}
|
||||
Loading…
Reference in a new issue