forked from platypush/platypush
47 lines
882 B
SCSS
47 lines
882 B
SCSS
.fade-in {
|
|
--duration: $fade-in-transition-duration;
|
|
animation-name: fadeIn;
|
|
animation-timing-function: ease-in;
|
|
animation-duration: var(--duration);
|
|
animation-fill-mode:both;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.roll-in {
|
|
--duration: $roll-in-transition-duration;
|
|
animation-name: rollIn;
|
|
animation-timing-function: ease-in;
|
|
animation-duration: var(--duration);
|
|
animation-fill-mode:both;
|
|
}
|
|
|
|
@keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform:translateX(-100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform:translateX(0);
|
|
}
|
|
}
|
|
|
|
.active-glow {
|
|
@include animation(active-glow 5s infinite);
|
|
}
|
|
|
|
@keyframes active-glow {
|
|
0% { background: $active-glow-bg-1; }
|
|
50% { background: $active-glow-bg-2; }
|
|
100% { background: $active-glow-bg-1; }
|
|
}
|
|
|