Robot
/
animate.css
mirror of https://github.com/animate-css/animate.css.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update flip.css

This commit is contained in:
Daniel Eden 2013-08-15 22:29:40 +01:00
parent ddca902f92
commit 6f860d9aa3
1 changed files with 18 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
source/flip.css
View File

@ -1,10 +1,10 @@
@-webkit-keyframes flip { @-webkit-keyframes flip {
0% { 0% {
-webkit-transform: perspective(400px) rotateY(0); -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out;
} }
40% { 40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out;
} }
50% { 50% {
@ -12,21 +12,21 @@
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
} }
80% { 80% {
-webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
} }
100% { 100% {
-webkit-transform: perspective(400px) scale(1); -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
} }
} }
@-moz-keyframes flip { @-moz-keyframes flip {
0% { 0% {
-moz-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-moz-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out;
} }
40% { 40% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-moz-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out;
} }
50% { 50% {
@ -34,21 +34,21 @@
-moz-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in;
} }
80% { 80% {
-moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-moz-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in;
} }
100% { 100% {
-moz-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-moz-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in;
} }
} }
@-o-keyframes flip { @-o-keyframes flip {
0% { 0% {
-o-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-o-animation-timing-function: ease-out; -o-animation-timing-function: ease-out;
} }
40% { 40% {
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-o-animation-timing-function: ease-out; -o-animation-timing-function: ease-out;
} }
50% { 50% {
@ -56,21 +56,21 @@
-o-animation-timing-function: ease-in; -o-animation-timing-function: ease-in;
} }
80% { 80% {
-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-o-animation-timing-function: ease-in; -o-animation-timing-function: ease-in;
} }
100% { 100% {
-o-transform: perspective(400px) scale(1); -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-o-animation-timing-function: ease-in; -o-animation-timing-function: ease-in;
} }
} }
@keyframes flip { @keyframes flip {
0% { 0% {
transform: perspective(400px) rotateY(0); transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
40% { 40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
50% { 50% {
@ -78,20 +78,16 @@
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
80% { 80% {
transform: perspective(400px) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
100% { 100% {
transform: perspective(400px) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
} }
.flip { .animated.flip {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
-webkit-animation-name: flip; -webkit-animation-name: flip;
-moz-backface-visibility: visible !important; -moz-backface-visibility: visible !important;
@ -100,4 +96,4 @@
-o-animation-name: flip; -o-animation-name: flip;
backface-visibility: visible !important; backface-visibility: visible !important;
animation-name: flip; animation-name: flip;
} }