0

Tenho um código CSS que faz uma animação de um modal descer e ficar no meio da tela, agora eu precisava de inverter essa animação, preciso que o modal que está no meio da tela suba e desapareça.

Quais informações eu deveria alterar para fazer o inverso?
Não é necessário apagar os códigos atuais, pretendo aproveita-los em outra parte da aplicação, precisaria era de novas classes que fizessem o inverso do atual.

Segue o código:

a {
    color: #92badd;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
}

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}

#formContent {
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formContent img {
    width: 150px; 
    height: 80px; 
    margin-top: 20px; 
    margin-bottom: 20px;
}

input[type=button], input[type=submit], input[type=reset]  {
    background-color: #56baed;
    border: none;
    color: white;
    height: 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    width: 85%;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
    background-color: rgb(27, 150, 216);
}

input[type=text], input[type=password] {
    background-color: #f6f6f6;
    color: #0d0d0d;
    height: 50px;
    border: 0px;
    text-align: center;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    background-color: rgb(245, 245, 245);
    border: 1px solid white;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: white;
    border: 1px solid #5fbae9;
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fadeIn.first {
    -webkit-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.fadeIn.second {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
<body>
    <div id="teste" class="wrapper fadeInDown">
        <div id="formContent">
            <div class="fadeIn first">
                <img src="img/logo.png">
            </div>
            <div>
                <input type="text" class="fadeIn second" name="iptUserLogin" placeholder="Usuário" required>
                <input type="text" class="fadeIn second" name="iptSenhaLogin" placeholder="Senha" required>
                <input type="button" class="fadeIn second" name="btnLogin" value="Entrar">
            </div>
        </div>
    </div>
</body>

2 Respostas 2

1

Podes fazer isso utilizando a propriedade animation-direction: reverse;

.fadeAlternate {
    animation: fadeInDown 1s forwards reverse;
}

Exemplo, criar uma classe designada para fazer o reverse da animação (fadeAlternate), e accioná-la quando ocorrer um clique em um elemento especifico como o botão de Login por exemplo.
Neste exemplo vamos simplesmente apontar para o id formContent já que está à mão, para fins de demonstração sem alterar o HTML para que fique mais claro.

código reduzido para fins de demonstração

// Adiciona a class "fadeAlternate" com Javascript no clique
var x = document.getElementById('formContent');
x.addEventListener('click', function(){
	x.classList.add('fadeAlternate');
});
/* Código Relevante */

.fadeInDown {
    animation: fadeInDown 1s;
}
.fadeAlternate {
    animation: fadeInDown 1s forwards reverse;
}




/* RESTO */
a {
    color: #92badd;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
}

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}

#formContent {
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    position: relative;
    padding: 0px;
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formContent img {
    width: 150px; 
    height: 80px; 
    margin-top: 20px; 
    margin-bottom: 20px;
}

input[type=button], input[type=submit], input[type=reset]  {
    background-color: #56baed;
    border: none;
    color: white;
    height: 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    width: 85%;
    font-size: 13px;
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
    background-color: rgb(27, 150, 216);
}

input[type=text], input[type=password] {
    background-color: #f6f6f6;
    color: #0d0d0d;
    height: 50px;
    border: 0px;
    text-align: center;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    background-color: rgb(245, 245, 245);
    border: 1px solid white;
    transition: all 0.5s ease-in-out;
    border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: white;
    border: 1px solid #5fbae9;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
    opacity:0;
    animation:fadeIn ease-in 1s forwards;
}

.fadeIn.first {
    animation-delay: 0.25s;
}
.fadeIn.second {
    animation-delay: 0.5s;
}
<div id="teste" class="wrapper fadeInDown">
  <div id="formContent">
    <div class="fadeIn first">
      <img src="img/logo.png">
    </div>
    <div>
      <input type="text" class="fadeIn second" name="iptUserLogin" placeholder="Usuário" required>
      <input type="text" class="fadeIn second" name="iptSenhaLogin" placeholder="Senha" required>
      <input type="button" class="fadeIn second" name="btnLogin" value="Entrar">
    </div>
  </div>
</div>

7
  • huahuahua, não dá tempo de digitar os dados
    – user60252
    Commented 11/06/2018 às 2:32
  • @LeoCaracciolo "Neste exemplo vamos simplesmente apontar para o id formContent já que está à mão, para fins de demonstração".
    – Chun
    Commented 11/06/2018 às 2:46
  • @LeoCaracciolo "accioná-la quando ocorrer um clique em um elemento especifico como o botão de Login por exemplo"
    – Chun
    Commented 11/06/2018 às 2:48
  • A gente vai logo no executar para ver se está ok e percebe algo que não funciona bem e dai nem lê a resposta
    – user60252
    Commented 11/06/2018 às 2:52
  • @Cʜᴜɴ Funcionou perfeitamente, apenas acrescentei o .fadeAlternate e funcionou certinho. Muito obrigado
    – D. Watson
    Commented 11/06/2018 às 16:28
0

Com a animação de fadeOut, você precisa alterar a classe que o elemento HTML está atribuído, de fadeIn para fadeOut. Para isso, você pode usar javascript.

function mudarClasse() {
    document.getElementById("fade").className = "fade-out"
}
#fade { transition: 2s; }
.fade-out { opacity: 0; }
.fade-in { opacity: 1; }
<p id='fade' class='fade-in'>Texto</p>

<button onClick='mudarClasse()'>FadeOut</button>

Basta alterar de acordo com seu código, criar uma nova animação para o fade-out, etc.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .