どうも！LSSです！！
ちょっと変な文章アニメーションを作ってみました。
2021/8/29追記
Windows＋GoogleChrome環境で動作確認していますが、FireFoxやSafariなどで正常に動作しないようです^^;
サンプル
あいうえお
かきくけこ
さしすせそ
たちつてと
コード
<style><!--
:root{
--txtanm1op1:0;
--txtanm1y1:30deg;
--txtanm1op2:0;
--txtanm1y2:30deg;
}
@keyframes txtanm1a{
0%,20%{--txtanm1op1:0;--txtanm1op2:0;--txtanm1y1:-90deg;--txtanm1y2:90deg;}
21%,40%{--txtanm1op1:1;--txtanm1op2:0;--txtanm1y1:0deg;--txtanm1y2:90deg;}
41%,80%{--txtanm1op1:1;--txtanm1op2:1;--txtanm1y1:0deg;--txtanm1y2:0deg;}
100%{--txtanm1op1:0;--txtanm1op2:0;--txtanm1y1:-90deg;--txtanm1y2:90deg;}
}
.txtanm1{
position:relative;
animation:txtanm1a 8s ease 0s infinite;
}
.txtanm1 p{
transition:3s;
position:relative;
transform-origin:0% 0%;
}
.txtanm1 p:nth-child(odd){
opacity:var(--txtanm1op1);
transform:rotate(var(--txtanm1y1));
}
.txtanm1 p:nth-child(even){
opacity:var(--txtanm1op2);
transform:rotate(var(--txtanm1y2));
}
--></style>
<div class="txtanm1">
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
<p>たちつてと</p>
</div>
コード中、最後のpタグ
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
<p>たちつてと</p>
の部分はいくつあってもよく、奇数番目、偶数番目でサンプルのように別々の動作となります。
<p>タグは「段落」を意味するタグで、はてなブログでもEnterキーで改段落となる、お馴染みのタグですねｗ
ですので、普通にブログで書いた文章を、
<div class="txtanm1">
</div>
の間に挟み、<style>タグをつける事でも動作します。
あとがき
というのを作ってみましたが、動きは他にも色々考えられますね。
いくつか考えてサンプル集にしてもいいかも？とも思ったりしましたｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
