###前提・実現したいこと
CSSのみでスライドショーを作成しようと考えているのですが、うまく動作しません。3枚と2枚の別々のスライドがあり、3枚スライドを1回再生後ボタンクリックで2枚のスライドを再生させようとしているのですが、3枚スライドの3枚目が表示された後しばらくすると真っ白な画面になってしまいます。また、2枚スライドは1ループ目はうまくいくのですが2ループ目からうまく動作しません。どうしたら思った通りに動作させられるでしょうか…
なお、命名は適当につけたのもなので読みにくいのですが、どうかご助言をいただければと存じます。
###該当のソースコード
CSS
1 html, body { margin:0;padding:0;height:100%; } 2 #pcontainer { position:relative;width:100%; height:100%; } 3 #display1 { background-color: #32CD32; } 4 #display2 { background-color: #FFD700; } 5 #display3 { background-color: #FFD700; } 6 #display4 { background-color: #FF0000; } 7 #display5 { background-color: #FF0000; } 8 .frame_alert { 9 width:100%; height:100%; position:absolute;top:0;left:0; 10 background-size:cover; 11 opacity:0; 12 animation:imgTrans 12s 1; 13 } 14 #display2 { animation-delay:6s; } 15 #display3 { animation-delay:12s; } 16 .memo_alert { 17 display:inline-block; 18 max-width:300px;width:85%; 19 background-color: rgba( 255, 255, 255, 0.6 ); 20 padding:10px; 21 position:absolute; 22 top:10%; 23 left:5%; 24 font-size:20px; 25 opacity:0; 26 animation:txtTrans 12s 1; 27 } 28 #display2 .memo { animation-delay: 6s; } 29 #display3 .memo { animation-delay:12s; } 30 @keyframes imgTrans { 31 0% { opacity:0; } 32 5% { opacity:1; } 33 95% { opacity:1; } 34 100% { opacity:1; } 35 } 36 @keyframes txtTrans { 37 0% { opacity:0; } 38 5% { opacity:1; } 39 90% { opacity:1; } 40 100% { opacity:1; } 41 } 42 43 .last_alert { 44 width:100%; height:100%; position:absolute;top:0;left:0; 45 background-size:cover; 46 opacity:0; 47 animation:imglast 12s infinite; 48 } 49 #display5 { animation-delay:6s; } 50 .memolast_alert { 51 display:inline-block; 52 max-width:300px;width:85%; 53 background-color: rgba( 255, 255, 255, 0.6 ); 54 padding:10px; 55 position:absolute; 56 top:10%; 57 left:5%; 58 font-size:20px; 59 opacity:0; 60 animation:txtlast 12s infinite; 61 } 62 #display5 .memo { animation-delay:6s; } 63 @keyframes imglast { 64 0% { opacity:1; } 65 50% { opacity:1; } 66 100% { opacity:0; } 67 } 68 @keyframes txtlast { 69 0% { opacity:1; } 70 50% { opacity:1; } 71 100% { opacity:0; } 72 }
HTML
1<div id="pcontainer"> 2 <?php 3if(!$_POST["post_flg"]) { 4?> 5 <div id="display1" class="frame_alert"><span class="memo"><strong>1枚目</strong></span></div> 6 <div id="display2" class="frame_alert"><span class="memo"><strong>2枚目</strong></span></div> 7 <div id="display3" class="frame_alert"><span class="memo"><strong>3枚目</strong></span> 8 <form action="" method="post"><input type="submit" name="post_flg" value="ボタン"></form></div> 9 <?php 10} else { 11?> 12 <div id="display4" class="last_alert"><span class="memolast_alert"><strong>4枚目</strong></span></div> 13 <div id="display5" class="last_alert"><span class="memolast_alert"><strong>5枚目</strong></span></div> 14<?php } ?> 15 </div>
回答1件
あなたの回答
tips
プレビュー