Fix Firefox flip bug (#805)
This commit is contained in:
parent
f1853f76cf
commit
611b8cc98b
|
@ -1875,36 +1875,44 @@
|
||||||
|
|
||||||
@-webkit-keyframes flip {
|
@-webkit-keyframes flip {
|
||||||
from {
|
from {
|
||||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
|
||||||
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
rotate3d(0, 1, 0, -360deg);
|
||||||
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
|
||||||
-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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
rotate3d(0, 1, 0, -190deg);
|
||||||
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
|
rotate3d(0, 1, 0, -190deg);
|
||||||
-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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
rotate3d(0, 1, 0, -170deg);
|
||||||
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
|
rotate3d(0, 1, 0, -170deg);
|
||||||
-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) scale3d(0.95, 0.95, 0.95);
|
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
|
||||||
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
rotate3d(0, 1, 0, 0deg);
|
||||||
|
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
|
||||||
|
rotate3d(0, 1, 0, 0deg);
|
||||||
-webkit-animation-timing-function: ease-in;
|
-webkit-animation-timing-function: ease-in;
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
-webkit-transform: perspective(400px);
|
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
|
||||||
transform: perspective(400px);
|
rotate3d(0, 1, 0, 0deg);
|
||||||
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
|
||||||
-webkit-animation-timing-function: ease-in;
|
-webkit-animation-timing-function: ease-in;
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
@ -1912,36 +1920,44 @@
|
||||||
|
|
||||||
@keyframes flip {
|
@keyframes flip {
|
||||||
from {
|
from {
|
||||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
|
||||||
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
rotate3d(0, 1, 0, -360deg);
|
||||||
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
|
||||||
-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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
rotate3d(0, 1, 0, -190deg);
|
||||||
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
|
rotate3d(0, 1, 0, -190deg);
|
||||||
-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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
rotate3d(0, 1, 0, -170deg);
|
||||||
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
|
rotate3d(0, 1, 0, -170deg);
|
||||||
-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) scale3d(0.95, 0.95, 0.95);
|
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
|
||||||
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
rotate3d(0, 1, 0, 0deg);
|
||||||
|
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
|
||||||
|
rotate3d(0, 1, 0, 0deg);
|
||||||
-webkit-animation-timing-function: ease-in;
|
-webkit-animation-timing-function: ease-in;
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
-webkit-transform: perspective(400px);
|
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
|
||||||
transform: perspective(400px);
|
rotate3d(0, 1, 0, 0deg);
|
||||||
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
|
||||||
-webkit-animation-timing-function: ease-in;
|
-webkit-animation-timing-function: ease-in;
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,26 +1,29 @@
|
||||||
@keyframes flip {
|
@keyframes flip {
|
||||||
from {
|
from {
|
||||||
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
|
||||||
animation-timing-function: ease-out;
|
animation-timing-function: ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
40% {
|
40% {
|
||||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
|
rotate3d(0, 1, 0, -190deg);
|
||||||
animation-timing-function: ease-out;
|
animation-timing-function: ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
||||||
|
rotate3d(0, 1, 0, -170deg);
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
80% {
|
80% {
|
||||||
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
|
||||||
|
rotate3d(0, 1, 0, 0deg);
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
transform: perspective(400px);
|
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
|
||||||
animation-timing-function: ease-in;
|
animation-timing-function: ease-in;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue