src/app/components/stylesheets/stylesheets.component.animation.scss
$transition: 0.5s;
.microprinted {
$alpha: -0.99;
$c: transparent;
$m: adjust-color(green, $alpha: $alpha);
$y: adjust-color(blue, $alpha: $alpha);
background:
repeating-radial-gradient(circle at top left, $c, $y 1em, $m 2em, $c 3em),
repeating-radial-gradient(circle at bottom left, $c, $y 1em, $m 2em, $c 3em),
repeating-radial-gradient(circle at top right, $c, $y 1em, $m 2em, $c 3em),
repeating-radial-gradient(circle at bottom right, $c, $y 1em, $m 2em, $c 3em);
}
.animate-in {
-webkit-animation: fadeIn $transition;
animation: fadeIn $transition;
}
.animate-out {
-webkit-transition: opacity $transition;
transition: opacity $transition;
opacity: 0;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}