How to reverse the animation of a Modal?

Asked

Viewed 286 times

0

I have a CSS code that makes an animation of a modal go down and stand in the middle of the screen, now I needed to reverse this animation, I need the modal that is in the middle of the screen go up and disappear.

What information should I change to do the reverse?
It is not necessary to delete the current codes, I intend to take advantage of them in another part of the application, I would need new classes that do the opposite of the current.

Follows the code:

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>

html css css3 animation

2 answers

1


You can do this using the property animation-direction: reverse;

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

Example, create a class designated to do the re-verse of animation (fadeAlternate), and trigger it when a click occurs on a specific element such as the Login for example.
In this example we will simply point to the id formContent since it is at hand, for demonstration purposes without changing the HTML to make it clearer.

reduced code for demonstration purposes

// 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>

  • huahuahua, no time to enter the data

  • @Leocaracciolo "In this example we will simply point to the id formContent since it is at hand, for demonstration purposes".

  • @Leocaracciolo "trigger it when there is a click on a specific element like the Login button for example"

  • We go right away to run to see if it’s okay and notice something that doesn’t work well and then nor read the answer

  • @Cʜᴜɴ It worked perfectly, I just added the .fadeAlternate and worked right. Thank you very much

  • @Cʜᴜɴ I would just like to ask a question, I saw that you removed -webkit-animation-delay and the -moz-animation-delay, was for explanatory purposes only or these attributes make no difference?

  • @J.Thatcher A bit of both. Some of these styles can be compressed in just one row as in the class example fadeAlternate where I added all the properties in one line. However I think most browsers nowadays recognize only the property animation without necessarily having to designate the prefix for each of them, -webkit-, -moz- etc.. Caniuse Animation. You can also see a list of properties you can compress by inspecting a animated element

Show 2 more comments

0

With the fadeOut animation, you need to change the class the HTML element is assigned to, from fadein to fadeOut. For this you can use 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>

Just change according to your code, create a new animation for the fade-out, etc.

Browser other questions tagged html css css3 animation

You are not signed in. Login or sign up in order to post.