Question

我试图淡出标题，然后使用animate.css淡入新标题。目前我能够执行淡入淡出，但我需要它们在相同的位置重叠。任何意见，将不胜感激。提前谢谢。

withCondition()

Answer 1

将2个div包装在一个包含div的div中，该div具有position：relative

然后给出位置内的2个div：绝对值; top：0; left：0;

这将使2个div重叠

Answer 2

请尝试以下代码：

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

使用Animate.css淡出然后淡入

2 个答案: