とくん
じっくりことこと はじまりました
おはようこざいます 僕です
いつも通り訳わかんないタイトルでごめんなさい。最近色々と思うのですよね。どうして僕はここにいるんだろうとかそんなことを。心臓がはじまると嫌でも人は場所を取るものだとはよく言いますが、僕には居場所なんてどこにもないんですよね。なのに、なんでこんなことをしているのだろうとかって。
なんで、こんな暗い話してるんでしょうね？
CSSでアニメーション
そんなわけで久しぶりにCSSをいじります。なぜかというとなんとなくです。いつもどおりよくわかんない理由でCSSいじってますね。まあブログ書く理由が人それぞれなように理由なんてそんなもんです。
こんなのを作ってみる
ソース
.heart{ animation: heart 1s linear .4s infinite; } @keyframes heart { 0%{ transform: scale(1.2); } 100%{ transform: scale(0.5); } }
transform: scale()で大きさ変えられます。
アニメーションをループさせるとき100%から0%に戻るときは一瞬でループするので、そういったことを考えて作らないとうまく「ドクンッ」って感じにならないんですね。キーフレームを使って動かすときは時間の流れを意識しながら描かないと思ったようなループアニメにならないなって思った。
余談
今後も、こういったCSSアニメの使い方みたいなやつ稀にやっていこうかなと画策してたりします。ぶるぶるアニメの作り方ばかり分かっても面白く無いですしね。なんか楽にアニメーションを作る方法とかを知りたくなってしまったので突発的にやるよって算段です。多分こんなの作っていくうちにコツとか掴めるようになってくるんじゃないかなとかそんな考えですね。まあ、自分の中でどこまで吸収できるかわかりませんけどね。とりあえずやってみようの精神です。
過去のぶるぶるアニメ
inujini.hatenablog.com
