115 lines
2.9 KiB
SCSS
115 lines
2.9 KiB
SCSS
// studio animations & keyframes
|
|
// ====================
|
|
|
|
// rotate clockwise
|
|
@mixin rotateClockwise {
|
|
0% {
|
|
@include transform(rotate(0deg));
|
|
}
|
|
|
|
100% {
|
|
@include transform(rotate(360deg));
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
|
|
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
|
|
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
|
|
@keyframes rotateClockwise { @include rotateClockwise();}
|
|
|
|
// ====================
|
|
|
|
// notifications slide up
|
|
@mixin notificationsSlideUp {
|
|
0% {
|
|
@include transform(translateY(0));
|
|
}
|
|
|
|
90% {
|
|
@include transform(translateY(-($notification-height)));
|
|
}
|
|
|
|
100% {
|
|
@include transform(translateY(-($notification-height*0.99)));
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
|
|
@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
|
|
@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
|
|
@keyframes notificationsSlideUp { @include notificationsSlideUp();}
|
|
|
|
// ====================
|
|
|
|
// notifications slide down
|
|
@mixin notificationsSlideDown {
|
|
0% {
|
|
@include transform(translateY(-($notification-height*0.99)));
|
|
}
|
|
|
|
10% {
|
|
@include transform(translateY(-($notification-height)));
|
|
}
|
|
|
|
100% {
|
|
@include transform(translateY(0));
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
|
|
@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
|
|
@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
|
|
@keyframes notificationsSlideDown { @include notificationsSlideDown();}
|
|
|
|
// ====================
|
|
|
|
// notifications slide up then down
|
|
@mixin notificationsSlideUpDown {
|
|
0%, 100% {
|
|
@include transform(translateY(0));
|
|
}
|
|
|
|
15%, 85% {
|
|
@include transform(translateY(-($notification-height)));
|
|
}
|
|
|
|
20%, 80% {
|
|
@include transform(translateY(-($notification-height*0.99)));
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
|
|
@-webkit-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
|
|
@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
|
|
@keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}
|
|
|
|
// ====================
|
|
|
|
// bounce in
|
|
@mixin bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
@include transform(scale(.3));
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
@include transform(scale(1.05));
|
|
}
|
|
|
|
100% {
|
|
@include transform(scale(1));
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounce-in { @include bounce-in(); }
|
|
@-webkit-keyframes bounce-in { @include bounce-in(); }
|
|
@-o-keyframes bounce-in { @include bounce-in(); }
|
|
@keyframes bounce-in { @include bounce-in();}
|
|
|
|
@mixin bounce-in-animation($duration, $timing: ease-in-out) {
|
|
@include animation-name(bounce-in);
|
|
@include animation-duration($duration);
|
|
@include animation-timing-function($timing);
|
|
@include animation-fill-mode(both);
|
|
} |