使用Animate.css淡出然後淡入

我試圖淡出標題，然後使用animate.css淡入新標題。目前我能夠執行淡入淡出，但我需要它們在相同的位置重疊。任何意見，將不勝感激。提前致謝。使用Animate.css淡出然後淡入

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

來源

2016-08-27 user3475215

試試下面這段代碼：

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

來源

2016-08-27 07:53:37 Ralis

完美！謝謝 – user3475215

歡迎你@Ha :) – Ralis

包裹具有位置的包裝DIV中的2周的div：相對

然後得到2周的div內的位置是：絕對的;頂部：0;左：0;

這將使2周的div重疊

來源

2016-08-27 07:37:52

使用Animate.css淡出然後淡入

回答

相關問題