アニメーションの設定内容
アニメーション内容
- 画像数：３枚
- アニメーション１：フェードイン、フェードアウト
- アニメーション２：右から左へ移動
- 画像ごとのアニメーション時間は15秒に設定。
スライド設定のアニメーション
画像に設定するアニメーションのベースを設定します。
使用しているCSSアニメーションのプロパティ
| animation-duration | アニメーション一回分の時間の長さを指定 |
| animation-iteration-count | アニメーションの繰り返し回数を指定 |
| animation-name | アニメーション名を指定 |
| animation-timing-functio | アニメーションのタイミング・進行割合を指定 |
.hero-slide__img {
animation-duration: 15s; // 長さ15秒
animation-iteration-count: infinite; // 無限に再生を繰り返す
animation-name: slideAnime; // アニメーション名
animation-timing-function: ease; // 開始と完了を滑らかにする
opacity: 0; // 透過設定
}アニメーションの時間を15秒で設定しているので、次の画像のアニメーション開始を5秒ずつ遅らせます。
使用しているCSSアニメーションのプロパティ
| animation-delay | アニメーションがいつ始まるかを指定 |
.hero-slide__item:nth-of-type(1) .hero-slide__img {
animation-delay: 0s;
}
.hero-slide__item:nth-of-type(2) .hero-slide__img {
animation-delay: 5s;
}
.hero-slide__item:nth-of-type(3) .hero-slide__img {
animation-delay: 10s;
}フェードイン、フェードアウトの設定
今回は画像が３枚なので、33%を起点にし、それより前でフェードインし、それより後でフェードアウトさせています。
クロスフェードさせるために、次の画像が透過100%になるにかけて、前の画像は透過を下げるように設定しています。
keyframesanimation-durationで設定したアニメーション時間の間に、%で中間地点（キーフレーム）を設け、キーフレームごとにスタイルを設定します。
@keyframes＋アニメーション名（animation-nameで指定したもの）
@keyframes slideAnime {
0% {
opacity: 0;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
49% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(-10%);
}
}
画像を右から左へ移動のアニメーション
transform: translateX(-10%);
15秒かけて（0%〜100%）左から右へ10%移動します。
100% {
opacity: 0;
transform: translateX(-10%);
}コピペ用全体ソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initiascale=1.0,user-scalable=no" />
<meta property="og:type" content="website" />
<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta name="description" content="" />
<title>スライドショー CSSアニメーション</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="wrapper">
<!-- [▼ hero] -->
<div class="hero">
<div class="hero__inner">
<ul class="hero-slide">
<li class="hero-slide__item">
<img class="hero-slide__img" src="img/index-hero01.jpg" alt="" />
</li>
<li class="hero-slide__item">
<img class="hero-slide__img" src="img/index-hero02.jpg" alt="" />
</li>
<li class="hero-slide__item">
<img class="hero-slide__img" src="img/index-hero03.jpg" alt="" />
</li>
</ul>
<div class="hero__heading">
<div class="hero__title">SLIDESHOW ANIMATION</div>
</div>
</div>
</div>
<!-- [▲ hero] -->
</div>
</body>
</html>
/* --------------------------------
Hero
-------------------------------- */
/* ------ slide image ------- */
.hero-slide__img {
animation-duration: 15s;
animation-iteration-count: infinite;
animation-name: slideAnime;
animation-timing-function: ease;
display: block;
min-height: 100vh;
object-fit: cover;
opacity: 0;
width: 100%;
}
.hero-slide__item:nth-of-type(1) .hero-slide__img {
animation-delay: 0s;
}
.hero-slide__item:nth-of-type(2) .hero-slide__img {
animation-delay: 5s;
}
.hero-slide__item:nth-of-type(3) .hero-slide__img {
animation-delay: 10s;
}
@keyframes slideAnime {
0% {
opacity: 0;
}
16% {
opacity: 1;
}
33% {
opacity: 1;
}
49% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(-10%);
}
}
/* ------ hero erea ------- */
.hero {
height: 100vh;
overflow: hidden;
position: relative;
}
.hero__inner {
margin: 0 auto;
width: 1100px;
}
/* ------ hero title ------- */
.hero__title {
font-size: 50px;
font-weight: bold;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 45%;
transform: translateY(-50%);
width: 100%;
}
.hero-slide__item {
bottom: 0;
height: 100%;
position: absolute;
right: -10%;
width: 110%;
}
