どうも！LSSです！！
CSSで蝶のような動きをするanimationを作ろうとして、幅の指定で悩み中…
コード
<style><!--
@keyframes btf{
0%{left:0%;}
100%{left:50%;}
}
@keyframes btfh{
0%{top:0px;}
100%{top:30px;}
}
.btfanm{
position:absolute;
text-align:right;
animation:btf 5s linear 0s infinite alternate,btfh 0.9s ease-in-out 0s infinite alternate;
}
--></style>
<div style="width: 100%; height: 100px; background-color: #5cdcdc; border-radius: 15px; position: relative;">
<div class="btfanm"><span style="font-size: 30px;">ご挨拶</span></div>
</div>
作ろうとしたきっかけ
のコメント欄にて、
421miyako (id:m421miyako)さんに
えー！やってみたい。丸を大きくして星を人の形にすれば玉乗りみたいなのができますよね。丸を花にして星を蝶とか。どこで使えばいいかわかりませんが。
ぴょんぴょん（LSS with JavaScriptの場合） - Little Strange Software
とのコメントをいただきました。
その中で「蝶」という言葉に、「蝶だったら動きはこんな感じだろうな~」と妄想したのがきっかけです。
「ぴょんぴょん」はJavaScriptで作った動きでしたが、今回のような動きならCSSでも可能かな？と思ってやってみました！
動くのは動きますが
見る人によって幅が違う（特にスマホとPC）のをどうするか？
コードを人に使ってもらうとすると、動く単語を変更した場合の横幅の変更をどうするか？
といった部分がクリアできていません^^;;;
一応、使い方とコード解説
<style><!--
@keyframes btf{
0%{left:0%;}
100%{left:50%;}
}
@keyframes btfh{
0%{top:0px;}
100%{top:30px;}
}
.btfanm{
position:absolute;
text-align:right;
animation:btf 5s linear 0s infinite alternate,btfh 0.9s ease-in-out 0s infinite alternate;
}
--></style>
<div style="width: 100%; height: 100px; background-color: #5cdcdc; border-radius: 15px; position: relative;">
<div class="btfanm"><span style="font-size: 30px;">ご挨拶</span></div>
</div>
まずはコードをまるまるコピーしていただき、下から２行目の
<span style="font-size: 30px;">ご挨拶</span>
の部分、これが蝶のように動く中身なので、好きに書き換えてOKです^^
４行目の
50%
ここが、「枠の幅に対して何％の位置まで右に移動するか」を指定している部分です。
今は無難に50%で指定していますが、80%などにするともっと右の方にまで移動する事になります^^
下から４行目の
background-color: #5cdcdc; border-radius: 15px;
は枠の装飾を指定している部分で、「#5cdcdc（水色）で角を15px丸めている」という指定をしています。
色を変えたり、全く違うCSS装飾をかけたりできます。
今回、作ってて自分が覚えた事
一つの要素に複数の動き（keyframes）を適用可能！
CSSのanimationって、
animation:
btf 5s linear 0s infinite alternate ,
btfh 0.9s ease-in-out 0s infinite alternate;
のように , 区切りで複数のキーフレームを適用できるんですね^^
今回の「左右の動きは5s、上下の動きは0.9s」みたいに倍数がかみ合わないようにしておくと、より動きに変化が出て面白いかも^^
はてなブログのIDコール、コメント欄からそのままコピペすると楽ｗｗｗ
さらにアイコンも含める事もできますね^^
421miyakoさん、実験みたいにしてすみません^^;;;;;
CSSでの指定の限界…？
「画面右端で折り返す」ようにしたかったのですが、もし、CSSで
( 親要素のwidth - 自要素のwidth )
の値をleftに指定する事ができれば、できそうではあります。
※keyframesの設定で0%{left:0px;}100%{right:0px;}としてみるのは試してみましたが、アニメにならなかったですｗ
これはここまでかなぁ…？
あと、全然余談なんですけど…
「挨拶」ってこんな漢字だったんですね！
言葉としては馴染みのある言葉だと思っていましたが…。
今までまったく意識してませんでしたが、この動く「ご挨拶」をじーーーーっと見てると、「え？こんな字だったっけ？？」って思ってしまいましたｗｗｗ
※追記
https://kanjibunka.com/kanji-faq/mean/q0325/
なるほど、分からない訳が分かりましたｗ
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
