CSS スライドショーの動作不備について

###前提・実現したいこと
CSSのみでスライドショーを作成しようと考えているのですが、うまく動作しません。３枚と２枚の別々のスライドがあり、３枚スライドを１回再生後ボタンクリックで２枚のスライドを再生させようとしているのですが、３枚スライドの３枚目が表示された後しばらくすると真っ白な画面になってしまいます。また、２枚スライドは１ループ目はうまくいくのですが２ループ目からうまく動作しません。どうしたら思った通りに動作させられるでしょうか…
なお、命名は適当につけたのもなので読みにくいのですが、どうかご助言をいただければと存じます。

###該当のソースコード

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>