How Come? - Development Blog

仕事のメモなど

今日やったこと(アニメーションをCSSからJSに)

CSSでだいたいの動きを決めてからWeb Animations APIに書き換えた。

  • 最初のアニメーションの画像を変更して、私のテーマでありサイト名でもある「Howcome?」の「?」を一番に出すことに。
  • 「?」はAffinity Designerのペンツールですでに画像として作っていたが、一番大事なところなので文字情報にしておこうとGoogle Fontsに変更。
  • JavaScriptの書き方がおかしいのか、Web Animations APIの書き方に準拠していないのか、animateというプロパティは存在しないと言われ続けて詰んでた。

Web Animations API を利用する - Web API | MDNの魔女のコードを参考に、CSSで作ったアニメーションを適用させようとしていてダメだったので、一度魔女のコードをHTML, CSS, JSすべて丸コピー。動くことを確認。
どうやら、配列の書き方に問題があるっぽい。これならいける。

let howcomeTransform = [
{ transform: 'scale(0.2) translate3D(0, -20%, 0) rotate(20deg)' },
{ transform: 'translate3D(0, 20%, 0) rotate(80deg)' },
{ transform: 'translate3D(0, -10%, 0)' },
{ transform: 'translate3D(0, 10%, 0) rotate(20deg)' },
{ transform: 'translate3D(20%, 50%, 0)' },
{ transform: 'scale(0.1) translate3D(10%, -50%, 0) rotate(-180deg)' },
{ transform: 'translate3D(-18%, 80%, 0) rotate(30deg)' }
];

 

ここにopacityを入れるとエラーになる。魔女コードにはtransformと一緒にカラーコードの変化も書いてあるのにopacityはだめなのか。わっからーん。

とりあえず「?」が動いたのでよかった。

https://howcome.dev/opening.html