flow/datamad2017
1
0
Fork 0
mirror of https://github.com/medialab-prado/datamad2017.git synced 2025-06-08 14:31:28 +02:00
Code Issues Projects Releases Wiki Activity

CSS files converted to Sass. Some style fixes. Created file with sponsors.

Browse source
This commit is contained in:
Oleh Zasadnyy 2014-08-08 01:23:36 +03:00
parent 1a5c529669
commit a45174a1e4
851 changed files with 19814 additions and 5533 deletions
Download patch file Download diff file Expand all files Collapse all files

101
_sass/vendor/animations/flippers/_flip.scss vendored Normal file
View file

@ -0,0 +1,101 @@
@if $use-flip == true {
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective($flipper-perspective) rotateY(0);
-webkit-animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective($flipper-perspective) scale(1);
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes flip {
0% {
-moz-transform: perspective($flipper-perspective) rotateY(0);
-moz-animation-timing-function: ease-out;
}
40% {
-moz-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
-moz-animation-timing-function: ease-out;
}
50% {
-moz-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
-moz-animation-timing-function: ease-in;
}
80% {
-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
-moz-animation-timing-function: ease-in;
}
100% {
-moz-transform: perspective($flipper-perspective) scale(1);
-moz-animation-timing-function: ease-in;
}
}
@-o-keyframes flip {
0% {
-o-transform: perspective($flipper-perspective) rotateY(0);
-o-animation-timing-function: ease-out;
}
40% {
-o-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
-o-animation-timing-function: ease-out;
}
50% {
-o-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
-o-animation-timing-function: ease-in;
}
80% {
-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
-o-animation-timing-function: ease-in;
}
100% {
-o-transform: perspective($flipper-perspective) scale(1);
-o-animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: perspective($flipper-perspective) rotateY(0);
animation-timing-function: ease-out;
}
40% {
transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective($flipper-perspective) scale(1);
animation-timing-function: ease-in;
}
}
.flip {
@include animate-prefixer(transform-style, preserve-3d);
@include animate-prefixer(backface-visibility, visible !important);
@include animate-prefixer(animation-name, flip)
}
}