質問編集履歴

1 HTMLの追記

Tomonyuki

Tomonyuki score 10

2016/12/03 06:07  投稿

CSS スライドショーの動作不備について
###前提・実現したいこと
CSSのみでスライドショーを作成しようと考えているのですが、うまく動作しません。3枚と2枚の別々のスライドがあり、3枚スライドを1回再生後ボタンクリックで2枚のスライドを再生させようとしているのですが、3枚スライドの3枚目が表示された後しばらくすると真っ白な画面になってしまいます。また、2枚スライドは1ループ目はうまくいくのですが2ループ目からうまく動作しません。どうしたら思った通りに動作させられるでしょうか…
なお、命名は適当につけたのもなので読みにくいのですが、どうかご助言をいただければと存じます。
###該当のソースコード
```CSS
   <style type="text/css">  
     html, body { margin:0;padding:0;height:100%; }
     #pcontainer { position:relative;width:100%; height:100%; }
     #display1 { background-color: #32CD32; }
     #display2 { background-color: #FFD700; }
     #display3 { background-color: #FFD700; }
     #display4 { background-color: #FF0000; }
     #display5 { background-color: #FF0000; }
     .frame_alert {
       width:100%; height:100%; position:absolute;top:0;left:0;
       background-size:cover;
       opacity:0;
       animation:imgTrans 12s 1;
     }
     #display2 { animation-delay:6s; }
     #display3 { animation-delay:12s; }
     .memo_alert {
       display:inline-block;
       max-width:300px;width:85%;
       background-color: rgba( 255, 255, 255, 0.6 );
       padding:10px;
       position:absolute;
       top:10%;
       left:5%;
       font-size:20px;
       opacity:0;
       animation:txtTrans 12s 1;
     }
     #display2 .memo { animation-delay: 6s; }
     #display3 .memo { animation-delay:12s; }
     @keyframes imgTrans {
       0%  { opacity:0; }
       5%  { opacity:1; }
       95% { opacity:1; }
       100% { opacity:1; }
     }
     @keyframes txtTrans {
       0% {  opacity:0; }
       5% {  opacity:1; }
       90% { opacity:1; }
       100% { opacity:1; }
     }
 
     .last_alert {
       width:100%; height:100%; position:absolute;top:0;left:0;
       background-size:cover;
       opacity:0;
       animation:imglast 12s infinite;
     }
     #display5 { animation-delay:6s; }
     .memolast_alert {
       display:inline-block;
       max-width:300px;width:85%;
       background-color: rgba( 255, 255, 255, 0.6 );
       padding:10px;
       position:absolute;
       top:10%;
       left:5%;
       font-size:20px;
       opacity:0;
       animation:txtlast 12s infinite;
     }
     #display5 .memo { animation-delay:6s; }
     @keyframes imglast {
       0%  { opacity:1; }
       50% { opacity:1; }
       100% { opacity:0; }
     }
     @keyframes txtlast {
       0%  { opacity:1; }
       50% { opacity:1; }
       100% { opacity:0; }
     }
```  
 
```HTML  
<div id="pcontainer">  
     <?php  
if(!$_POST["post_flg"]) {  
?>  
     <div id="display1" class="frame_alert"><span class="memo"><strong>1枚目</strong></span></div>  
     <div id="display2" class="frame_alert"><span class="memo"><strong>2枚目</strong></span></div>  
     <div id="display3" class="frame_alert"><span class="memo"><strong>3枚目</strong></span>  
     <form action="" method="post"><input type="submit" name="post_flg" value="ボタン"></form></div>  
     <?php  
} else {  
?>  
     <div id="display4" class="last_alert"><span class="memolast_alert"><strong>4枚目</strong></span></div>  
     <div id="display5" class="last_alert"><span class="memolast_alert"><strong>5枚目</strong></span></div>  
<?php } ?>  
   </div>  
```
  • HTML

    12254 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    8104 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る