エンドロールサンプル【Keyframes+animation】

		<div id="movie">
				<div class="roll-text">
	企画
	<br>
	キャラクターデザイン/原画
	<br>
	原案・脚本
	<br>
	脚本協力
	<br>
	グラフィック
	<br>
	モーションデザイン
	<br>
	モーションポートレート・グラフィック
	<br>
	<br>
	システムプランナー/進行管理
	<br>
	システムグラフィック/ムービー
	<br>
	マップデザイン
	<br>
	ミニキャラクター/モブデザイン
	<br>
	タイトルロゴデザイン
	<br>
	スクリプト
	<br>
	台本作成
	<br>
	構成協力
	<br>
	デバッグ・テストプレイ
	<br>
	プロデューサー
	<br>
	ディレクター
	<br>
	プログラム
	<br>
	サポート
	<br>
	音声担当
	<br>
	収録
	<br>
	絵コンテ・演出
	<br>
	作画監督
	<br>
	動画
	<br>
	仕上げ
	<br>
	撮影
	<br>
	編集
	<br>
	3DCG
	<br>
	制作進行
	<br>
	アニメーションプロデューサー
	<br>
	アニメーション制作
	<br>
	ーサウンドスタッフー
	<br>
	音楽
	<br>
	サウンドエフェクト
	<br>
	<br>
	オープニングテーマ
	曲名「 」
	作詞
	作曲
	編曲
	<br>
	歌
	<br>
	挿入歌
	曲名「 」
	作詞
	作曲
	編曲
	<br>
	歌
	<br>
	エンディングテーマ
	曲名「 」
	作詞
	作曲
	編曲
	<br>
	歌
	<br>
	レーコーディング
	<br>
	マスタリング
	<br>
	プロモーションネゴシエーター
	<br>
	プロモーションマネージメント
	<br>
	セールスプロモーション
	<br>
	パッケージデザイン
	<br>
	ソフトウェアマニュアルデザイン
	<br>
	パブリシティデザイン
	<br>
	スペシャルサンクス
	(50音順)
	<br>
	ディレクター
	<br>
	プロデューサー
				</div>
			</div>

body {
	background-color:black;
	font-family: 'Kosugi Maru', sans-serif;
}
#movie{
	width : 100%;
	height : 400px;
	overflow:hidden;
	position:relative;
  }
.roll-text{
	width: 100%;
	text-align: center;
	white-space : pre;
	color:white;
	position:absolute;
	animation: anim-scroll-up 50s linear forwards;
  }
  @keyframes anim-scroll-up{
	from{
	  top:auto;
	}
	to{
	  bottom:100%;
	}
  }

var rollText = document.querySelector("#movie .roll-text");
    rollText.style.setProperty("bottom" , (rollText.offsetHeight * -1) + "px" , "");