cssアニメーションでのslideの挙動がおかしい（position:absoluteを使わずに実装したい）

position:absoluteを使わず、cssを使ったslideを作成したい

position:absoluteを使わず、cssを使ったslideを作成したいと思い、
要素の横並びをdisplay:flexを使い、
それらをcssアニメーションでslideしたいと思っております。
参考サイト
http://css.programming.jp/?p=1388
上記では、横並びはposition:absoluteとleftによる
位置指定で行われております。

発生している問題・エラーメッセージ

display:flexによる横並びだと、
animationが機能しなくなる

該当のソースコード

html
1<div id="stage">
2    <input type="radio" id="back1" name="gal">
3    <input type="radio" id="back2" name="gal">
4    <input type="radio" id="back3" name="gal">
5    <input type="radio" id="back4" name="gal">
6    <input type="radio" id="back5" name="gal">
7    <input type="radio" id="next1" name="gal">
8    <input type="radio" id="next2" name="gal">
9    <input type="radio" id="next3" name="gal">
10    <input type="radio" id="next4" name="gal">
11    <input type="radio" id="next5" name="gal">
12  <div id="photos">
13      <div id="photo0" class="pic"><img src="https://placehold.jp/640x480.png">
14      </div>
15      <div id="photo1" class="pic"><img src="https://placehold.jp/640x480.png">
16	    <label for="back1"><div id="left1" class="b_left"><span>＜</span></div></label> 
17	    <label for="next1"><div id="right1" class="b_right"><span>＞</span></div></label>
18      </div>
19      <div id="photo2" class="pic"><img src="https://placehold.jp/640x480.png">
20	    <label for="back2"><div id="left2" class="b_left"><span>＜</span></div></label>
21    	<label for="next2"><div id="right2" class="b_right"><span>＞</span></div></label>
22      </div>
23      <div id="photo3" class="pic"><img src="https://placehold.jp/640x480.png">
24	    <label for="back3"><div id="left3" class="b_left"><span>＜</span></div></label>
25    	<label for="next3"><div id="right3" class="b_right"><span>＞</span></div></label>
26        
27        
28      </div>
29      <div id="photo4" class="pic"><img src="https://placehold.jp/640x480.png">
30    	<label for="back4"><div id="left4" class="b_left"><span>＜</span></div></label>
31    	<label for="next4"><div id="right4" class="b_right"><span>＞</span></div></label>
32      </div>
33      <div id="photo5" class="pic"><img src="https://placehold.jp/640x480.png">
34    	<label for="back5"><div id="left5" class="b_left"><span>＜</span></div></label>
35    	<label for="next5"><div id="right5" class="b_right"><span>＞</span></div></label>
36      </div>
37      <div id="photo6" class="pic"><img src="https://placehold.jp/640x480.png">
38      </div>
39    </div>
40   <div style="padding:36%;"></div>
41</div>

css
1/* 表示画面 */
2#stage {
3	
4	max-width: 600px;
5	margin: 0 auto;
6	overflow: hidden;
7}
8/*全ての写真を水平一列に格納したdiv、#photosに,
9スライドショーの animation を設定*/
10#photos {
11	display:flex;
12	width:700%;
13	animation: imgPassToLeft0 30s infinite;
14	-webkit-animation: imgPassToLeft0 30s infinite;
15}
16/*各写真の並び位置を設定
17#photo1, #photo2, #photo3, #photo4, #photo5 */
18.pic{position: relative;}
19.pic img { width:100%; }
20
21/* 全てのラジオボタンを非表示に */
22#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
23	display: none;
24}
25/*送りボタン文字（＜、＞）の設定*/
26.b_left span, .b_right span {
27	position: absolute;
28	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
29	font-size: 40px;
30	font-weight: bold;
31	opacity:0;
32	top: 40%;
33	color:#EEE;
34}
35.b_left span {
36	left: 5%;;	
37}
38.b_right span {
39	left: 85%;
40}
41/*ボタン文字hover時の設定*/
42.pic:hover > label div span {
43	opacity:1;
44	color:#EEE;
45}
46.pic label div span:hover {
47	color:#f00;
48	cursor:pointer;
49}
50/* 各送りボタンクリック時のanimation設定 */
51#next1:checked ~ #photos {
52	animation: imgPassToLeft1 30s infinite;	
53	animation-delay: -4.8s;
54	-webkit-animation: imgPassToLeft1 30s infinite;	
55	-webkit-animation-delay: -4.8s;
56}
57#next2:checked ~ #photos {	
58	animation: imgPassToLeft2 30s infinite;
59	animation-delay: -10.8s;
60	-webkit-animation: imgPassToLeft2 30s infinite;
61	-webkit-animation-delay: -10.8s;
62}
63#next3:checked ~ #photos {
64	animation: imgPassToLeft3 30s infinite;
65	animation-delay: -16.8s;
66	-webkit-animation: imgPassToLeft3 30s infinite;
67	-webkit-animation-delay: -16.8s;
68}
69#next4:checked ~ #photos {
70	animation: imgPassToLeft4 30s infinite;
71	animation-delay: -22.8s;
72	-webkit-animation: imgPassToLeft4 30s infinite;
73	-webkit-animation-delay: -22.8s;
74}
75#next5:checked ~ #photos {
76	animation: imgPassToLeft5 30s infinite;
77	animation-delay: -28.8s;
78	-webkit-animation: imgPassToLeft5 30s infinite;
79	-webkit-animation-delay: -28.8s;
80}
81#back1:checked ~ #photos {
82	animation: toRight1 6s 0s forwards, imgPassToRight1 30s 6s infinite;
83}
84#back2:checked ~ #photos {
85	animation: toRight2 6s 0s forwards, imgPassToRight2 30s 6s infinite;
86}
87#back3:checked ~ #photos {
88	animation: toRight3 6s 0s forwards, imgPassToRight3 30s 6s infinite;
89}
90#back4:checked ~ #photos {
91	animation: toRight4 6s 0s forwards, imgPassToRight4 30s 6s infinite;
92}
93#back5:checked ~ #photos {
94	animation: toRight5 6s 0s forwards, imgPassToRight5 30s 6s infinite;
95}
96/* animation設定 */
97@keyframes imgPassToLeft0 {
98	0%  { left:-100%; }
99	16% { left:-100%; }
100	20% { left:-200%; }
101	36% { left:-200%; }
102	40% { left:-300%; }
103	56% { left:-300%; }
104	60% { left:-400%; }
105	76% { left:-400%; }
106	80% { left:-500%; }
107	96% { left:-500%; }
108	100% { left:-600%; }
109}
110@-webkit-keyframes imgPassToLeft0 {
111	0%  { left:-100%; }
112	16% { left:-100%; }
113	20% { left:-200%; }
114	36% { left:-200%; }
115	40% { left:-300%; }
116	56% { left:-300%; }
117	60% { left:-400%; }
118	76% { left:-400%; }
119	80% { left:-500%; }
120	96% { left:-500%; }
121	100% { left:-600%; }
122}
123@keyframes imgPassToLeft1 {
124	0% { left:-100%; }
125	16% { left:-100%; }
126	20% { left:-200%; }
127	36% { left:-200%; }
128	40% { left:-300%; }
129	56% { left:-300%; }
130	60% { left:-400%; }
131	76% { left:-400%; }
132	80% { left:-500%; }
133	96% { left:-500%; }
134	100% { left:-600%; }
135}
136@-webkit-keyframes imgPassToLeft1 {
137	0% { left:-100%; }
138	16% { left:-100%; }
139	20% { left:-200%; }
140	36% { left:-200%; }
141	40% { left:-300%; }
142	56% { left:-300%; }
143	60% { left:-400%; }
144	76% { left:-400%; }
145	80% { left:-500%; }
146	96% { left:-500%; }
147	100% { left:-600%; }
148}
149@keyframes imgPassToLeft2 {
150	0% { left:-100%; }
151	16% { left:-100%; }
152	20% { left:-200%; }
153	36% { left:-200%; }
154	40% { left:-300%; }
155	56% { left:-300%; }
156	60% { left:-400%; }
157	76% { left:-400%; }
158	80% { left:-500%; }
159	96% { left:-500%; }
160	100% { left:-600%; }
161}
162@keyframes imgPassToLeft3 {
163	0% { left:-100%; }
164	16% { left:-100%; }
165	20% { left:-200%; }
166	36% { left:-200%; }
167	40% { left:-300%; }
168	56% { left:-300%; }
169	60% { left:-400%; }
170	76% { left:-400%; }
171	80% { left:-500%; }
172	96% { left:-500%; }
173	100% { left:-600%; }
174}
175@keyframes imgPassToLeft4 {
176	0% { left:-100%; }
177	16% { left:-100%; }
178	20% { left:-200%; }
179	36% { left:-200%; }
180	40% { left:-300%; }
181	56% { left:-300%; }
182	60% { left:-400%; }
183	76% { left:-400%; }
184	80% { left:-500%; }
185	96% { left:-500%; }
186	100% { left:-600%; }
187}
188@keyframes imgPassToLeft5 {
189	0% { left:-100%; }
190	16% { left:-100%; }
191	20% { left:-200%; }
192	36% { left:-200%; }
193	40% { left:-300%; }
194	56% { left:-300%; }
195	60% { left:-400%; }
196	76% { left:-400%; }
197	80% { left:-500%; }
198	96% { left:-500%; }
199	100% { left:-600%; }
200}
201@keyframes imgPassToRight1 {
202	0% { left: 0%; }
203	4% { left: -100%; }
204	20% { left:-100%; }
205	24% { left:-200%; }
206	40% { left:-200%; }
207	44% { left:-300%; }
208	60% { left:-300%; }
209	64% { left:-400%; }
210	80% { left:-400%; }
211	84% { left:-500%; }
212	100% { left:-500%; }
213}
214@keyframes imgPassToRight2 {
215	0% { left: -100%; }
216	4% { left: -200%; }
217	20% { left:-200%; }
218	24% { left:-300%; }
219	40% { left:-300%; }
220	44% { left:-400%; }
221	60% { left:-400%; }
222	64% { left:-500%; }
223	80% { left:-500%; }
224	83.999% { left:-600%; }
225	84% { left:-100%; }
226	100% { left:-100%; }
227}
228@keyframes imgPassToRight3 {
229	0% { left: -200%; }
230	4% { left: -300%; }
231	20% { left:-300%; }
232	24% { left:-400%; }
233	40% { left:-400%; }
234	44% { left:-500%; }
235	60% { left:-500%; }
236	63.999% { left:-600%; }
237	64% { left:-100%; }
238	80% { left:-100%; }
239	84% { left:-200%; }
240	100% { left:-200%; }
241}
242@keyframes imgPassToRight4 {
243	0% { left: -300%; }
244	4% { left: -400%; }
245	20% { left:-400%; }
246	24% { left:-500%; }
247	40% { left:-500%; }
248	43.999% { left:-600%; }
249	44% { left:-100%; }
250	60% { left:-100%; }
251	64% { left:-200%; }
252	80% { left:-200%; }
253	84% { left:-300%; }
254	100% { left:-300%; }
255}
256@keyframes imgPassToRight5 {
257	0% { left: -400%; }
258	4% { left: -500%; }
259	20% { left:-500%; }
260	23.999% { left:-600%; }
261	24% { left:-100%; }
262	40% { left:-100%; }
263	44% { left:-200%; }
264	60% { left:-200%; }
265	64% { left:-300%; }
266	80% { left:-300%; }
267	84% { left:-400%; }
268	100% { left:-400%; }
269}
270@keyframes toRight1 {
271	0% { left:-100%; }
272	19.999% { left:0%; }
273	20% { left: -500%; }
274	100% { left:-500%; display:none;}
275}
276@keyframes toRight2 {
277	0% { left:-200%; }
278	20% { left: -100%; }
279	100% { left:-100%; display:none;}
280}
281@keyframes toRight3 {
282	0% { left:-300%; }
283	20% { left: -200%; }
284	100% { left:-200%; display:none;}
285}
286@keyframes toRight4 {
287	0% { left:-400%; }
288	20% { left: -300%; }
289	100% { left: -300%; display:none;}
290}
291@keyframes toRight5 {
292	0% { left:-500%; }
293	20% { left: -400%; }
294	100% { left: -400%; display:none;}
295}
296

試したこと

absoluteを使うと、高さが失われ、
画像や文章の量によって
高さが変わったとき、paddingの設定を
しなおさなければならないため、
display:flex；にしましたが、
animationがうまく作動しなくなりました。

その他気になる点

参考サイトにも書いている通り、

「css animation の制約で、進行中のanimationを続けてスタートすることができないということがあり、戻るボタンをクリックして前のスライドに戻り、再びクリックしたスライドに戻った時に戻るボタンをクリックしたケースでは動作しない。」
「このような現象を回避する方法としては、進行中のanimationをjavascriptで削除する方法がweb上で多数紹介されている」
となっており、いくつもウェブサイトを見てみましたが、
それにあたるものが見つかりませんでした。
こちら、本当に解決できるものなのでしょうか？

長くなりましたが、
何卒宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

position が static では left プロパティは効果がありません。
https://developer.mozilla.org/ja/docs/Web/CSS/left

left を使うのであれば、少なくとも relative にはしておきましょう。

CSS
1#photos {
2  position: relative;
3}

投稿2019/06/11 09:18

x_x

総合スコア13749

satoru225Simple

2019/06/11 09:24 編集

ご回答ありがとうございます。しかし、positionやleftは使わず、 display:flex;で画像を横並びにし、 animationを動作させたいと思っております。何卒宜しくお願い致します。

satoru225Simple

2019/06/11 11:04

あ、理解しました。アニメーションでもleftを使ってらからですね。勘違いしてました

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！