Fix fade-out animation running on page load

master
Torjus 2018-07-17 12:49:52 +02:00
parent 977ffd9d24
commit bb022543a8
4 changed files with 3 additions and 33 deletions

View File

@ -27,14 +27,11 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 0.4vmin; padding: 0.4vmin;
visibility: hidden;
opacity: 0; opacity: 0;
animation: fade-out 0.3s; transition: opacity 0.3s;
&.visible { &.visible {
visibility: visible;
opacity: 1; opacity: 1;
animation: fade-in 0.3s;
} }
> .button { > .button {

View File

@ -41,14 +41,11 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 0.4vmin; padding: 0.4vmin;
visibility: hidden;
opacity: 0; opacity: 0;
animation: fade-out 0.3s; transition: opacity 0.3s;
&.visible { &.visible {
visibility: visible;
opacity: 1; opacity: 1;
animation: fade-in 0.3s;
} }
> .button { > .button {

View File

@ -5,7 +5,6 @@ global-reset();
@import './mixins'; @import './mixins';
@import './fonts'; @import './fonts';
@import './reset'; @import './reset';
@import './keyframes';
html { html {
height: 100%; height: 100%;

View File

@ -1,23 +0,0 @@
@keyframes fade-in {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fade-out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}