Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【しつこく】ちょっとCSSの実験【複数要素でのアニメーション同期】

 どうも!LSSです!!

 

ちょっと何がしたいのか、LSSにも分からないシリーズ(?)

little-strange.hatenablog.com

の続き、です。

 

2021/8/29追記
WindowsGoogleChrome環境で動作確認していますが、FireFoxSafariなどで文字のほうが正常に動作しないようです^^;

 

 

サンプル

だいぶ前の写真を
引っ張り出してきました!w

 

 

コード

<style><!--
:root{--txtop:0;}
@keyframes tbds{
0%{top:-20%;left:100%;}
30%{top:5%;left:2%;}
31%{top:5%;left:8%;}
32%{top:5%;left:3%;}
33%{top:5%;left:7%;}
34%{top:5%;left:4%;}
35%{top:5%;left:6%;}
36%{top:5%;left:5%;}
37%{--txtop:0;}
50%{--txtop:1;}
69%{--txtop:0;}
70%{top:5%;left:5%;}
80%{top:-20%;left:-100%;}
100%{top:-20%;left:-100%;}
}
.imgwk{
position:absolute;
width:90%;height:90%;
overflow:hidden;
animation: tbds 16s linear 0s infinite;
}
.sptxt{
position:absolute;
width:90%;height:90%;
top:5%;left:5%;
opacity: var(--txtop);
top:30%;
text-align:center;
z-index:1;
color:white;
text-shadow:1px 1px 0px black;
transition:0.5s;
}
--></style>
<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
<div class="imgwk"><img src="画像ファイルのURL" width="100%" />
<div class="sptxt">だいぶ前の写真を<br />引っ張り出してきました!w</div>
</div>
</div>

 

 

CSSにはアニメーションの同期をとる指定はないようですが…

CSSのキーフレームアニメーション、同時に様々なプロパティに対する変更をかける事はできる、ものの、あくまでその対象は「animationを指定した要素に対して」のみ。

 

のんべえ(id:whisky-coke)

ぶるぶる良いですね。ちょっと考えてるのがありますが画像が中央に来たときに画像上に文字をフェードイン、フェードアウトって出来ますか?

 

とのコメントを前回いただきましたが(いつもありがとうございます^^)、

「画像が中央に来たとき」に「文字を」となると、「画像」と「文字」というそれぞれの要素でタイミングを合わせる必要が出てきます。

アニメーションのタイミングを合わせる指定、SVGアニメーションにはたしかありましたが、CSSにはそれらしいものがなく、するとしたら

「同じ秒数で繰り返すanimation指定を画像・文字それぞれに指定して、同時スタート・同じタイミングで変化」する事に期待するか…ですが、ブラウザの解釈次第でズレが生じそうな気がしてしまいます^^;(試す前から弱気w)

 

と、そこで思いついたのが今回のサンプル。

CSS変数を利用します。

 

まず、

:root{--txtop:0;}

によって、「--txtop」という変数を定義しておきます。

 

そして、文字のクラスに対して、

opacity: var(--txtop);

という指定をしておきます。

opacityプロパティは 0以上1以下 で指定し、

0なら完全に透明、1なら完全に不透明、0.5なら半透明

という風に透過度を指定するプロパティです。

 

あとは、画像に指定したanimationのkeyframes中に、

37%{--txtop:0;}
50%{--txtop:1;}
69%{--txtop:0;}

と指定した事で「アニメ時間の37%経過時には変数の値は0、50%経過時には1、69%経過時にはまた0、を指定する」というのを織り込んでいるんですね。

 

さて、これによって--txtopの値が「0→0.1→0.2→…→0.9→1」という風に変化してくれたらよいのですが…animationの補完機能は変数の内容にまでは及ばないようです^^;
(途中でいきなり0→1に変わる)

 

なのでまた別の手段。

文字の方のクラスに対して、

transition:0.5s;

を入れておく事で、「変数--txtopが0が1に変化した時に、文字のクラスのopacityの値も0→1に変化するが、その変化を0.5秒かけて徐々に変更する」、というのを仕込んでいます!

 

…ちょっと(だいぶ?)回りくどい指定(&説明w)なような気もしますが、この方法だとタイミングずれが生じる恐れもなく、画像の変化のタイミングと文字の変化のタイミングを合わせる事ができますね^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^