57 lines
1.2 KiB
SCSS
57 lines
1.2 KiB
SCSS
// studio animations & keyframes
|
|
// ====================
|
|
|
|
// rotate clockwise
|
|
@mixin rotateClockwise {
|
|
0% {
|
|
@include transform(rotate(0deg));
|
|
}
|
|
|
|
25% {
|
|
@include transform(rotate(90deg));
|
|
}
|
|
|
|
50% {
|
|
@include transform(rotate(180deg));
|
|
}
|
|
|
|
100% {
|
|
@include transform(rotate(360deg));
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
|
|
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
|
|
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
|
|
@keyframes rotateClockwise { @include rotateClockwise();}
|
|
|
|
// ====================
|
|
|
|
// 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);
|
|
} |