スライドショー画像移動が早すぎるので、遅くしたい。cssのみ使用。

スライドショー　@keyframsの速度を遅くしたい。現在のスライドショーの速度が早すぎる。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

もう少しゆっくりスライドショーを回転させたいです。

特にありません

該当のソースコード

【html】
<div id="mainPhoto">
<div class="slider">
<div class="slider__content"><img src="images/main1.jpg" alt="" class="slider__img"></div>
<div class="slider__content"<img src="images/main2.jpg" alt="" class="slider__img"></div>
<div class="slider__content"><img src="images/main3.jpg" alt="" class="slider__img"></div>

</div> </div>

【ｃｓｓ】
.slider{
width: 1200px;
height: 518px;
overflow: hidden;
position: relative;
margin:auto;
}

.slider__content{
min-width: 100%;
position: absolute;
top: 0;
left: 0;
transform: translateX(100%);
background-color: #000;
}

.slider__content:nth-child(1){
animation: sliderAnime 6s ease-in-out infinite;
z-index: 6;
}

.slider__content:nth-child(2){
animation: sliderAnime2 6s ease-in-out 1s infinite;
z-index: -1;
}

.slider__content:nth-child(3){
animation: sliderAnime2 6s ease-in-out 3s infinite;
z-index: -1;
}

@keyframes sliderAnime{
0%{
z-index: 5;
transform: translateX(0);
}
16.6%{
transform: translateX(0);
}
33.3%{
transform: translateX(-100%);
}
50%{
z-index: -1;
transform: translateX(-100%);
}
66.6%{
transform: translateX(100%);
}
83.2%{
z-index: 5;
transform: translateX(100%);
}
100%{
z-index: 5;
transform: translateX(0);
}
}

@keyframes sliderAnime2{
0%{
z-index: 5;
transform: translateX(100%);
}
16.6%{
transform: translateX(0);
}
33.3%{
transform: translateX(0);
}
50%{
transform: translateX(-100%);
}
66.6%{
z-index: -1;
transform: translateX(-100%);
}
83.2%{
transform: translateX(100%);
}
100%{
z-index: 5;
transform: translateX(100%);
}
}


### 試したこと

6sなどの秒数をとりあえず倍の12sと記載。
その後、@keyframs 以下の●●％と記載ある数字をいろいろ入れ替えてみました。

### 補足情報（FW/ツールのバージョンなど）

DW CC 2019-2020
すでに同様の質問がありましたら申し訳ないです。
画像回転速度をいろいろ試してみたのですが、わかりやすい説明サイトも見当たらず、困っています。
どうぞよろしくお願いいたします。

hatena19

2019/12/07 00:37

HTMLのコードも提示してください。

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

回答1件

ベストアンサー

下記でどうでしょうか。

css
1.slider {
2	width: 1200px;
3	height: 518px;
4	overflow: hidden;
5	position: relative;
6	margin: auto;
7}
8
9.slidercontent {
10	min-width: 100%;
11	position: absolute;
12	top: 0;
13	left: 0;
14	transform: translateX(100%);
15	background-color: #000;
16}
17
18.slidercontent:nth-child(1) {
19	animation: sliderAnime 12s ease-in-out infinite;
20	z-index: 6;
21}
22
23.slidercontent:nth-child(2) {
24	animation: sliderAnime2 12s ease-in-out 2s infinite;
25	z-index: -1;
26}
27
28.slidercontent:nth-child(3) {
29	animation: sliderAnime2 12s ease-in-out 6s infinite;
30	z-index: -1;
31}
32
33@keyframes sliderAnime {
34	0% {
35		z-index: 5;
36		transform: translateX(0);
37	}
38	16.6% {
39		transform: translateX(0);
40	}
41	33.3% {
42		transform: translateX(-100%);
43	}
44	50% {
45		z-index: -1;
46		transform: translateX(-100%);
47	}
48	66.6% {
49		transform: translateX(100%);
50	}
51	83.2% {
52		z-index: 5;
53		transform: translateX(100%);
54	}
55	100% {
56		z-index: 5;
57		transform: translateX(0);
58	}
59}
60
61@keyframes sliderAnime2 {
62	0% {
63		z-index: 5;
64		transform: translateX(100%);
65	}
66	16.6% {
67		transform: translateX(0);
68	}
69	33.3% {
70		transform: translateX(0);
71	}
72	50% {
73		transform: translateX(-100%);
74	}
75	66.6% {
76		z-index: -1;
77		transform: translateX(-100%);
78	}
79	83.2% {
80		transform: translateX(100%);
81	}
82	100% {
83		z-index: 5;
84		transform: translateX(100%);
85	}
86}