矢印を押したら、次にスライドし、そのままアニメーションを続くようにしたい（CSS）

矢印を押したら、次にスライドし、そのままアニメーションを続くようにしたい

現在、自動スライダーをCSSで作成しているのですが、
＋で矢印を押したら、次にスライドし、そのままアニメーション
が続くCSSによるスライダーを作成したいと思っております。
参考にしているサイトは以下になります。
http://css.programming.jp/?p=557
http://css.programming.jp/?p=1051

該当のソースコード

HTML
1
2<!-- スライド表示枠 -->
3<div id="stage">
4  <!-- スライド切換えボタン用ラジオボタン -->
5  <input type="radio" id="r1" name="gal">
6  <input type="radio" id="r2" name="gal">
7  <input type="radio" id="r3" name="gal">
8  <input type="radio" id="r4" name="gal">
9  <input type="radio" id="r5" name="gal">
10  <!-- 送りボタン用ラジオボタン -->
11  <input type="radio" id="back1" name="gal"><input type="radio" id="next1" name="gal">
12  <input type="radio" id="back2" name="gal"><input type="radio" id="next2" name="gal">
13  <input type="radio" id="back3" name="gal"><input type="radio" id="next3" name="gal">
14  <input type="radio" id="back4" name="gal"><input type="radio" id="next4" name="gal">
15  <input type="radio" id="back5" name="gal"><input type="radio" id="next5" name="gal">
16  <!-- 現スライド標示ボタンのラジオボタンとの関連付け -->
17  <label for="r1" id="lb1" class="circ"></label>
18  <label for="r2" id="lb2" class="circ"></label>
19  <label for="r3" id="lb3" class="circ"></label>
20  <label for="r4" id="lb4" class="circ"></label>
21  <label for="r5" id="lb5" class="circ"></label>
22 
23  <!-- スライド群 -->
24  <div id="photos">
25  	  <!-- スライド1 -->
26      <div id="photo1" class="pic">
27        <!-- スライド写真と現スライド標示ボタン -->
28      	<img src="https://placehold.jp/640x480.png">
29        <label id="lb1_2b" class="btn2"></label>
30        <!-- 送りボタンの表示とラジオボタンとの関連付け -->
31        <label for="back1"><span class="pb">＜</span></label>
32        <label for="next1"><span class="nb">＞</span></label>
33      </div>      
34      <div id="photo2" class="pic">
35      	<img src="https://placehold.jp/640x480.png">
36        <label id="lb2_2b" class="btn2"></label>
37        <label for="back2"><span class="pb">＜</span></label>
38        <label for="next2"><span class="nb">＞</span></label>
39      </div>
40      <div id="photo3" class="pic">
41      	<img src="https://placehold.jp/640x480.png">
42        <label id="lb3_2b" class="btn2"></label>
43        <label for="back3"><span class="pb">＜</span></label>
44        <label for="next3"><span class="nb">＞</span></label>
45      </div>
46      <div id="photo4" class="pic">
47      	<img src="https://placehold.jp/640x480.png">
48        <label id="lb4_2b" class="btn2"></label>
49        <label for="back4"><span class="pb">＜</span></label>
50        <label for="next4"><span class="nb">＞</span></label>
51      </div>
52      <div id="photo5" class="pic">
53      	<img src="https://placehold.jp/640x480.png">
54        <label id="lb5_2b" class="btn2"></label>
55        <label for="back5"><span class="pb">＜</span></label>
56        <label for="next5"><span class="nb">＞</span></label>
57      </div>
58  </div>
59 <!--使用画像の縦/横を2/1にした割合＝padding幅-->
60
61</div>

CSS
1#stage {
2	position: relative;
3	max-width: 640px;
4	margin: 0 auto;
5	background:#666;
6	overflow: hidden;
7}
8/*全ラジオボタンを非表示に*/
9#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {
10	display: none;
11}
12
13/*全表示スライドのコンテナー*/
14#photos {
15	position: relative;
16  width:100%;
17	/*pointer-events: none;*/
18	animation:flowSlides 40s infinite;
19}
20
21/* 個々のスライド・現スライド標示ボタン */
22.pic {
23	position: absolute;
24  top:0;
25  left:100%;
26  width:100%;
27  -moz-animation: imgtrans 40s infinite;
28	-webkit-animation: imgtrans 40s infinite;
29	animation: imgtrans 40s infinite;
30}
31
32#photo1 {
33  position:relative;
34	-moz-animation-delay: 0s;
35	-webkit-animation-delay: 0s;
36	animation-delay: 0s;
37}
38#photo2 {
39	-moz-animation-delay: 8s;
40	-webkit-animation-delay: 8s;
41	animation-delay: 8s;
42}
43#photo3 {
44	-moz-animation-delay: 16s;
45	-webkit-animation-delay: 16s;
46	animation-delay: 16s;
47}
48#photo4 {
49	-moz-animation-delay: 24s;
50	-webkit-animation-delay: 24s;
51	animation-delay: 24s;
52}
53#photo5 {
54	-moz-animation-delay: 32s;
55	-webkit-animation-delay: 32s;
56	animation-delay: 32s;
57}
58
59
60/* 初期スライドショー */
61
62@keyframes imgtrans {
63 0% { left:100%; }
64 5% { left:0%; }
65 20% { left:0%; }
66 25% { left:-100%; }
67 100% { left:-100%; }
68}
69
70
71/* 表示切換えボタンと表示位置 */
72.circ, .btn2{
73	 position: absolute;
74    bottom: 0px;
75    width: 14px;
76    height: 14px;
77    border-radius: 7px;
78    background-color: #ccc;
79    cursor: pointer;
80}
81#lb1,#lb1_2b{ left: 27%;}
82#lb2,#lb2_2b{ left: 37%;}
83#lb3,#lb3_2b{ left: 47%;}
84#lb4,#lb4_2b{ left: 57%;}
85#lb5,#lb5_2b{ left: 67%;}
86
87 .btn2{
88    background-color: #56b329;
89}
90/* 左右送りボタン */
91.pb, .nb { color:#fff;font-weight:bold; font-size:26px;display:block;position:absolute;top:45%;/*z-index:200;pointer-events:auto;*/}
92.pb { left:0%; }
93.nb { left:96%; }
94.pb:hover, .nb:hover { color:orange; cursor:pointer; }
95/* stageが初期サイズ以下のなったときのサイズ */
96@media screen and (max-width: 640px) { .pb, .nb { font-size:18px; } }
97
98*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動*/
99#r1:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
100#r2:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
101#r3:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
102#r4:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
103#r5:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
104/* 左右送りボタン */
105#back1:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
106#back2:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
107#back3:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
108#back4:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
109#back5:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
110#next1:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
111#next2:checked ~ #photos { animation:flowSlides3 40s infinite; }
112#next3:checked ~ #photos { animation:flowSlides4 40s infinite; }
113#next4:checked ~ #photos { animation:flowSlides5 40s infinite; }
114#next5:checked ~ #photos { animation:flowSlides1 40s infinite; }
115
116
117
118
119/* 各スライド向けスライドショー */
120@keyframes flowSlides1 {
121	 0% { left:100%; }
122 5% { left:0%; }
123 20% { left:0%; }
124 25% { left:-100%; }
125 100% { left:-100%; }
126}
127@keyframes flowSlides2 {
128	 0% { left:100%; }
129 5% { left:0%; }
130 20% { left:0%; }
131 25% { left:-100%; }
132 100% { left:-100%; }
133}
134@keyframes flowSlides3 {
135	 0% { left:100%; }
136 5% { left:0%; }
137 20% { left:0%; }
138 25% { left:-100%; }
139 100% { left:-100%; }
140}
141@keyframes flowSlides4 {
142	 0% { left:100%; }
143 5% { left:0%; }
144 20% { left:0%; }
145 25% { left:-100%; }
146 100% { left:-100%; }
147}
148@keyframes flowSlides5 {
149	0% { left:0px;}
150	2% { left:0px;}
151	18% { left:0px;}
152	20% { left:0px;}
153	20.01% { left:-640px;}
154	22% { left:-640px;}
155	38% { left:-640px;}
156	40% { left:-640px;}
157	40.01% { left:-1280px;}
158	42% { left:-1280px;}
159	58% { left:-1280px;}
160	60% { left:-1280px;}
161	60.01% { left:-1920px;}
162	62% { left:-1920px;}
163	78% { left:-1920px;}
164	80% { left:-1920px;}
165	80.01% { left:-2560px;}
166	82% { left:-2560px;}
167	98% { left:-2560px;}
168	100% { left:-2560px;}
169}