テキストアニメーション/text-anime-test/index11.html   
css/common3.css

 

※自社のトップページでも動いているが
keyframesの名前とanimation-nameの名前はトップページ用として別の名前をつけた。

 

CSS

.bg-slider {
width: 99.1vw;

height: 100vh;
background-position:center center;

background-size: cover;
display: flex;
/*align-items:flex-end;*/　
justify-content: center;
position: relative;
}

 

アニメーションの位置
背景要素をrelativeにして　アニメーションの位置はabsoluteにしてtopやleftの%で位置を設定

/****************************************
アニメーション　スクロール
/***************************************/

.text01 {
position: absolute;
top: 5%;
left:20%;

animation-name:animation1;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;

}

.text02 {
position: absolute;
top: 5%;
right:20%;

animation-name:animation2;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;

}

.text03 {
position: absolute;
top: 5%;

animation-name:animation3;
animation-duration: 25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;

}

１枚５秒の背景画像を5枚= 5 x 5 = 25秒
25秒が100％として　5枚で割ると　100÷5＝20%　が1枚の長さのＭＡＸパーセンテージ
１枚目、３枚目、5枚目にアニメーションをつけるために　20%づつ加算。
opacityで非表示から表示部分をプラスでパーセント別途追加。
各アニメーションは25秒の中で何パーセントで表示され、非表示させるかで調整。
ループさせる。

でも%は実際にタイミングがちょっと違うので見ながら微調整した。

 

@keyframes animation1 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}

5% {
opacity: 1;
transform: translate3d(0, 0, 0);
}

26% {
opacity: 0;
transform: translate3d(0, 0, 0);
}

100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}

@keyframes animation2 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}

41% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}

45% {
opacity: 1;
transform: translate3d(0, 0, 0);
}

66% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}

100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}

@keyframes animation3 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}

81% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}

85% {
opacity: 1;
transform: translate3d(0, 0, 0);
}

101% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}

102% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}

 

スマホなどの調整として

/*****TOP スマホ縦****/

@media (max-width: 479px){

.bg-slider {
width: 100%;
height: 60vh;
background-position:center center;
background-size: cover;
display: flex;
/*align-items: flex-end; */
justify-content: space-evenly;
}

 

.text01 img{
height: 150px;
width: auto;
}

.text02 img{
height: 150px;
width: auto;
}

.text03 img{
height: 150px;
width: auto;
}

}

 

 

html

 

<script src=”js/jquery-1.11.3.min.js”></script>

<script src=”js/jquery.bgswitcher.js”></script>

<script>
jQuery(function($) {
$(‘.bg-slider’).bgSwitcher({
images: [‘image/top/main1.jpg’,’image/top/main2.jpg’,’image/top/main4.jpg’,’image/top/main5.jpg’,’image/top/main6.jpg’], // 切り替える背景画像を指定
interval: 5000, // 背景画像を切り替える間隔を指定 3000=3秒
loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
shuffle: false, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
effect: “fade”, // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
duration: 500, // エフェクトの時間を指定します。
easing: “swing” // エフェクトのイージングをlinear,swingから指定
});
});
</script>

 

<div class=”container-fluid px-0 bg-slider ” >

<div class=”text01“><img src=”image/item5.png” class=”img-fluid” alt=””/></div>

<div class=”text02“><img src=”image/item6.png” class=”img-fluid” alt=””/></div>

<div class=”text03“><img src=”image/item7.png” class=”img-fluid” alt=””/></div>

 

</div>