CSS 斜めに文字をアニメーションさせる方法

お疲れ様です。
この方のサイトの最初の名前が表示される所からサイトの全体の構造が表示される所までがかっこよくて私も参考にしたいと思ったのですが、最初の名前の左の文字から斜めに降ってくるところが難しくてよくわかりません。
左の文字を筆頭に斜めに降りてくる(アニメーションで)ここがわかりません。

HTML

<html>
<head>
	<title>Mysite/YuugoHayashi</title>
	<link rel="stylesheet" type="text/css" href="css/index.css"><!--index.cssのリンク-->
	<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR" rel="stylesheet"><!--h1のgooglefont-->
</head>
<body>

	<div id="wrapper"><!---wrappperエリアの開始-->

		<div id="text_inner"><!--mask_textエリアの開始-->
			<h1>Yuugo Hayashi</h1>
			<!--containerエリアの-->	
			<div id="container"></div>

		</div><!--mask_textエリアの終了-->

	</div><!--wrapperエリアの終了-->



<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script><!--jQueryのリンク-->
<script>

$(function(){//jQueryの実行書式
	$('#text_inner h1').animate({
          'marginTop': '20px',
          'transform': 'rotate(-10deg)'
        },1000);//animaete
	});//function

	


</script>
</body>
</html

以下,CSS

	margin:0;
	padding:0;
}
li{
	list-style-position: outside;
	list-style-type: none;
}
div{
	box-sizing: border-box;
}
a{
	text-decoration:none;
}

#wrapper{
	background-color:black;
	width:100%;
	height:100vh;
}
#text_inner{
	width:11%;
	position:absolute;
	top:46%;
	left:45%;
	padding:10px;
	transform:rotate(-2deg);
}
h1{
	color:#FFFFFF;
	top:50%;
	left:40%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:1.2em;
}
#container{
	margin: 20px;
  　width: 400px;
  　height: 8px;

}

以下、参考にしたサイトです。

https://hiraomakoto.jp/

CSSやアニメーションに詳しい方いらっしゃいましたらアドバイスいただけると嬉しいです。
宜しくお願い致します。