大好きな映画で、もう4、5回くらい観た気がするし、DVDも持ってるのですが、やっていると観てしまいます。タイムパラドックスとか細かいことがどうでもよくなるくらい、爽やかで気持ちのいいアニメだと思います。今の目で見るとどうしても古臭さを感じる原作を、舞台を現代にして大きくアレンジしているのも良いですね。ところでこの映画、タイトルロゴが都合二回表示されるのですが、これを見ていてふと、「CSSで作れそう」と思いました。実際に作ってみました。以下のリンクからどうぞ。Chrome、Safari、Firefox、IE11で動作確認しています。時をかける少女タイトルロゴアニメ簡単な解説CSSは部分的に抜き出しているので、実際のコードはソースを見てください。class="title"><span><span>時</span><span>を</span></span><span><span>か</span><span>け</span><span>る</span></span><span><span>少</span><span>女</span></span></p>「時をかける少女」の文字列を一文字ずつspanで分け、さらに「時を」「かける」「少女」ごとにspanでグループ化しています。一続きの言葉なので改行はしません。vertical-rl;}writing-modeで縦書きにします。IEの独自実装だったものがCSS3で正式採用されたものです(ただしIEとはプロパティ値の名前が違う)。100%}}文字横の赤い線を擬似要素で作り、これの高さを@keyframesで動かしています。animationのforwardsはアニメ終了時点のスタイルをそのまま保持するための指定です。このままでは全ての赤線が同時にアニメーションしてしまうので、開始時点をずらしてあげます。2.8s;}次は文字のフェードです。1}}赤線が表示されるのと、文字が表示され始めるのとでは後者のタイミングが遅いため、最初からanimation-delayの値(.8s)を設定しています。これもこのままでは全て同時に表示されるので、一個ずつずらしてあげます。2.5s;}...長いので省略しています。writing-modeに対応していないブラウザのために、@supportsを使って縦書きを再現しています。それなら最初からwriting-mode使わなけりゃいいという話ですが、せっかくの縦書きなので使っています。専用のプロパティがあるならそっち使うに越したことはないですから。全部表示されたらフェードアウトする効果も追加しようかと思ったのですが、Chromeで表示が崩れる不具合が生じたためやめました。一応DVDを見ながら極力タイミングが合うように調整していますが、完全に一致させるのは難しいので、このくらいかなあと感覚で作りました。