サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
話題を集めている1話3分半のショートアニメ『銀河特急 ミルキー☆サブウェイ』（以下『ミルキー☆サブウェイ』）。今年7月からTOKYO MXでのテレビ放送に加え、公式YouTubeでは11言語にて全世界同時配信され、この9月18日、最終話を迎えた。その放映後には、『ミルキー☆サブウェイ』全12話を再編集して新作パートを追加した劇場版公開の決定も明かされた。本作の監督、脚本、キャラクターデザイン、制作というほぼすべての工程を1人で担当し、約2年の歳月をかけてつくりあげたのが、亀山陽平さんだ。映像系の専門学校の卒業制作としてつくった前作『ミルキー☆ハイウェイ』は総再生回数920万回にのぼり、それから本作へとつながっていったという。 個性あふれるキャラクターデザインをはじめ、80年代レトロと近未来感を融合したファッション、お喋り感あふれるセリフ回し、音楽と連動したアクションなどなど、魅力がつきな
UIのインタラクションの実装で、height: 0 → autoなど、数値とキーワード値とをアニメーションさせたいと思ったことはないでしょうか。 一見可能そうに見えるものの、従来はCSSのみではアニメーションが不可能でした。代替手段として数値同士を変更してトランジションを実装したり、JavaScriptでの実装を行うほかありませんでした。 height: autoの代わりに、offsetHeightを取得してアコーディオンの開閉アニメーションを実装する例Chrome 129、Edge 129（2024年9月）で登場した、CSSのinterpolate-sizeプロパティとcalc-size()関数により、固有キーワード値のアニメーションが可能になりました。本記事ではinterpolate-sizeとcalc-size()がどのようなものなのか、作例とともに紹介します。 ※本記事の作例は、
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips]Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p {transition: font-size 1s; } 動かすためのマストプロパティCSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
