datamad2017/_sass/vendor/animations/flippers/_flipOutY.scss

51 lines
1.1 KiB
SCSS

@if $use-flipOutY == true {
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective($flipper-perspective) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
opacity: 0;
}
}
@-moz-keyframes flipOutY {
0% {
-moz-transform: perspective($flipper-perspective) rotateY(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
opacity: 0;
}
}
@-o-keyframes flipOutY {
0% {
-o-transform: perspective($flipper-perspective) rotateY(0deg);
opacity: 1;
}
100% {
-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
transform: perspective($flipper-perspective) rotateY(0deg);
opacity: 1;
}
100% {
transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
opacity: 0;
}
}
.flipOutY {
@include animate-prefixer(backface-visibility, visible !important);
@include animate-prefixer(animation-name, flipOutY);
}
}