155 lines
1.9 KiB
SCSS
155 lines
1.9 KiB
SCSS
// animations & keyframes
|
|
// ====================
|
|
|
|
// fade in
|
|
@include keyframes(fadeIn) {
|
|
0% {
|
|
opacity: 0.0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
// fade out
|
|
@include keyframes(fadeOut) {
|
|
0% {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
|
|
// rotate up
|
|
@include keyframes(rotateUp) {
|
|
0% {
|
|
@include transform(rotate(0deg));
|
|
}
|
|
|
|
50% {
|
|
@include transform(rotate(-90deg));
|
|
}
|
|
|
|
100% {
|
|
@include transform(rotate(-180deg));
|
|
}
|
|
}
|
|
|
|
// rotate up
|
|
@include keyframes(rotateDown) {
|
|
0% {
|
|
@include transform(rotate(0deg));
|
|
}
|
|
|
|
50% {
|
|
@include transform(rotate(90deg));
|
|
}
|
|
|
|
100% {
|
|
@include transform(rotate(180deg));
|
|
}
|
|
}
|
|
|
|
// rotate clockwise
|
|
@include keyframes(rotateCW) {
|
|
0% {
|
|
@include transform(rotate(0deg));
|
|
}
|
|
|
|
50% {
|
|
@include transform(rotate(180deg));
|
|
}
|
|
|
|
100% {
|
|
@include transform(rotate(360deg));
|
|
}
|
|
}
|
|
|
|
// rotate counter-clockwise
|
|
@include keyframes(rotateCCW) {
|
|
0% {
|
|
@include transform(rotate(0deg));
|
|
}
|
|
|
|
50% {
|
|
@include transform(rotate(-180deg));
|
|
}
|
|
|
|
100% {
|
|
@include transform(rotate(-360deg));
|
|
}
|
|
}
|
|
|
|
// bounce in
|
|
@include keyframes(bounceIn) {
|
|
0% {
|
|
opacity: 0.0;
|
|
@include transform(scale(0.3));
|
|
}
|
|
|
|
50% {
|
|
opacity: 1.0;
|
|
@include transform(scale(1.05));
|
|
}
|
|
|
|
100% {
|
|
@include transform(scale(1));
|
|
}
|
|
}
|
|
|
|
// bounce out
|
|
@include keyframes(bounceOut) {
|
|
0% {
|
|
@include transform(scale(1));
|
|
}
|
|
|
|
50% {
|
|
opacity: 1.0;
|
|
@include transform(scale(1.05));
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.0;
|
|
@include transform(scale(0.3));
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
|
|
// flash
|
|
@include keyframes(flash) {
|
|
0%, 100% {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
|
|
// flash - double
|
|
@include keyframes(flashDouble) {
|
|
0%, 50%, 100% {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
25%, 75% {
|
|
opacity: 0.0;
|
|
}
|
|
}
|