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

Flipped flip. Fixes daneden/animate.css#214

This commit is contained in:
Jory Graham 2014-05-15 18:41:20 -04:00
parent 292d48904a
commit f9d1291282
3 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
animate.css vendored
View File

@ -1606,36 +1606,36 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
@-webkit-keyframes flip { @-webkit-keyframes flip {
0% { 0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-webkit-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
40% { 40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-webkit-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
50% { 50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
80% { 80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
100% { 100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
@ -1643,41 +1643,41 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
@keyframes flip { @keyframes flip {
0% { 0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-webkit-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
40% { 40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-webkit-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
50% { 50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
80% { 80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
100% { 100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }

2
animate.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
source/flippers/flip.css
View File

@ -1,26 +1,26 @@
@keyframes flip { @keyframes flip {
0% { 0% {
transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
40% { 40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
50% { 50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
80% { 80% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
100% { 100% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
} }