簡単な解説

CSSは部分的に抜き出しているので、実際のコードはソースを見てください。

<p 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でグループ化しています。一続きの言葉なので改行はしません。

.title {
	font: bold 72px/1.45 sans-serif;
	writing-mode: vertical-rl;
}

writing-modeで縦書きにします。もともとIEの独自実装だったものがCSS3で正式採用されたものです（ただしIEとはプロパティ値の名前が違う）。

.title > span {
	position: relative;
	display: table;
}

.title > span::before {
	position: absolute;
	background: rgb(92,27,25);
	content: "";
	width: 2px;
	height: 0;
	right: 0;
	top: 0;
	animation: line 2.1s linear forwards;
}

@keyframes line {
	0% {height: 0}
	100% {height: 100%}
}

文字横の赤い線を擬似要素で作り、これの高さを@keyframesで動かしています。animationのforwardsはアニメ終了時点のスタイルをそのまま保持するための指定です。

このままでは全ての赤線が同時にアニメーションしてしまうので、開始時点をずらしてあげます。

.title > span:nth-child(2)::before {
	animation-delay: 1.4s;
}

.title > span:nth-child(3)::before {
	animation-delay: 2.8s;
}

次は文字のフェードです。

.title > span > span {
	opacity: 0;
	animation: fade 1.7s .8s ease-out forwards;
}

@keyframes fade {
	0% {opacity: 0}
	100% {opacity: 1}
}

赤線が表示されるのと、文字が表示され始めるのとでは後者のタイミングが遅いため、最初からanimation-delayの値（.8s）を設定しています。

当然これもこのままでは全て同時に表示されるので、一個ずつずらしてあげます。

.title > span:first-child > span:nth-child(2) {
	animation-delay: 1.5s;
}

.title > span:nth-child(2) > span:first-child {
	animation-delay: 1.9s;
}

.title > span:nth-child(2) > span:nth-child(2) {
	animation-delay: 2.5s;
}
...

長いので省略しています。

また、writing-modeに対応していないブラウザのために、@supportsを使って縦書きを再現しています。それなら最初からwriting-mode使わなけりゃいいという話ですが、せっかくの縦書きなので使っています。専用のプロパティがあるならそっち使うに越したことはないですから。

全部表示されたらフェードアウトする効果も追加しようかと思ったのですが、Chromeで表示が崩れる不具合が生じたためやめました。

一応DVDを見ながら極力タイミングが合うように調整していますが、完全に一致させるのは難しいので、このくらいかなあと感覚で作りました。

雰囲気は再現できてるでしょう？