// @include transform-origin(100%,100%,0); // @include transition-delay(1)

%fx-transition-fade {

@include opacity(0);
@include transition-property(opacity);
@include transition-duration($transitionDurationBase / 2);
@include transition-timing-function(ease-out);
&.is-visible {
    @include opacity(1);
}

}

%fx-transition-zoom {

@include opacity(0);
@include scale(0,0);
@include transition-property(opacity scale);
@include transition-duration($transitionDurationBase / 2);
@include transition-timing-function(ease-out);
&.is-visible {
    @include opacity(1);
    @include scale(1,1);
}

}

%fx-transition-rolldown {

@include opacity(0);
@include transform(scale(0.85, 0.85) rotate3d(2, 0, 0, -90deg) translate3d(0, -100%, 0));
&.is-visible {
    @include opacity(1);
    @include transform(scale(1.0, 1.0) rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0));
    @include transition-property(opacity scale rotate3d translate3d);
    @include transition-duration($transitionDurationBase);
    @include transition-timing-function(in-ease-out);

}

}

%fx-transition-slidedown {

@include transform(translate3d(0, -100%, 0));
@include transition-property(translate3d);
@include transition-duration($transitionDurationBase);
@include transition-timing-function(in-ease-out);
&.is-visible {
    @include transform(translate3d(0, 0, 0));
}

}