user3475215 user3475215 - 3 months ago 16
CSS Question

Using Animate.css to fade out then fade in

I am attempting to fade out a heading then fade in a new heading using animate.css. Currently I am able to perform the fades but I need them to overlap in the same position. Any advice would be appreciated. Thanks in advance.

<link href="animate.css" rel="stylesheet">
<style type="text/css">
body {
font-family: helvetica;
}
h1 {
font-size: 20em;
text-align: center;
}
.item {
margin: 300px auto 0 auto;
color: black;
text-align: center;
-webkit-animation-duration: 2s;
/* -webkit-animation-delay: 2s; */
/*-webkit-animation-iteration-count: 2;*/
}
.why {
margin: 300px auto 0 auto;
color: black;
text-align: center;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 2s;
}
</style>
</head>
<body>
<div class="item animated fadeOut"><h1>Cities</h1></div>
<div class="why animated fadeIn"><h1>WHY</h1></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>

Answer

Try this code below:

<link href="animate.css" rel="stylesheet">
<style type="text/css">
    body {
        font-family: helvetica;
    }
    h1 {
        font-size: 20em;
        text-align: center;
    }
    .item {
        margin: 300px auto 0 auto;
        color: black;
        text-align: center;
        -webkit-animation-duration: 2s;
        /* -webkit-animation-delay: 2s; */
        /*-webkit-animation-iteration-count: 2;*/
    }
    .why {
        margin: 300px auto 0 auto;
        color: black;
        text-align: center;
        -webkit-animation-delay: 2s;
        -webkit-animation-duration: 2s;
    }
</style>
</head>
<body>
    <div class="item animated fadeOut" style="position:absolute">
        <h1>Cities</h1>
    </div>
    <div class="why animated fadeIn" style="position:absolute">
        <h1>WHY</h1>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    </script>
</body>
Comments