<div id="movie">
    <div class="roll-text">
        企画
        <br>
        カツメ
        <br>
        原案・脚本
        <br>
        カツメ
        <br>
        プログラム
        <br>
        sgi-chang
        <br>
        コードサポート
        <br>
        sgi-chang
        <br>
        仕上げ
        <br>
        カツメ
        <br>
        撮影
        <br>
        カツメ
        <br>
        編集
        <br>
        カツメ
        <br>
        イラスト
        <br>
        カツメ
        <br>
        <br>
        オープニングテーマ
        曲名「 ひとりで6つの帽子をかぶってみた with UXDC 」
        作詞　カツメ
        作曲　カツメ
        編曲　カツメ
        <br>
        歌　カツメ with UXDC
        <br>
        挿入歌
        曲名「 私とハンバーグ、どっちが大事なの？ 」
        作詞　カツメ
        作曲　カツメ
        編曲　カツメ
        <br>
        歌　カツメ
        <br>
        エンディングテーマ
        曲名「 Wow Wow 和風ハンバーグ 」
        作詞　カツメ
        作曲　カツメ
        編曲　カツメ
        <br>
        歌　カツメ
        <br>
        <br>
        ハンドメイドアーティスト
        <br>
        カツメ
        <br>
        ハイパーメディアクリエイター
        <br>
        カツメ
        <br>
        ひとりで6つの帽子実行委員会
        <br>
        カツメ
        <br>
        スペシャルサンクス
        (50音順)
        <br>
        sgi-chang
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <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" , "");