<body>
  <div class="catch_wrap">
    <h2 class="catch">Hope and keep busy.</h2>
    <div class="line"></div>
  </div>
</body>
/* -webkit-の部分は、iOS8以下やAndroid4.4.4以下の為の記述なので、対応させる必要がなければ削除してください。 */

.catch_wrap{
	position: relative;
	display: inline-block;
	overflow: hidden;
}
.catch {
	opacity: 0;
	margin: 0;
	position: relative;
	bottom: -30px;
	font-size: 30px;
	white-space: nowrap;
	-webkit-animation: catch 2s ease 4s 1;
	animation: catch 2s ease 4s 1;
  -webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.line{
	background-color: #000;
	width: 100%;

	position: absolute;
  -webkit-transform: scaleX(0);
	transform: scaleX(0);
  -webkit-animation: line 5s ease 2s 1;
	animation: line 5s ease 2s 1;
  -webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes line {
	0%   {bottom: 0;height: 5px;}
	20%  {-webkit-transform: scaleX(1);}
	40%  {height: 5px;}
	50%  {bottom: 0;height: 100%;}
	70%  {bottom: 100%;height: 100%;} 
	100% {bottom: 100%;height: 0;-webkit-transform: scaleX(1);}
}
@keyframes line {
	0%   {bottom: 0;height: 5px;}
	20%  {transform: scaleX(1);}
	40%  {height: 5px;}
	50%  {bottom: 0;height: 100%;}
	70%  {bottom: 100%;height: 100%;} 
	100% {bottom: 100%;height: 0;transform: scaleX(1);}
}
@-webkit-keyframes catch { 
	0%   {opacity: 0; }
	100% {opacity: 1; bottom: 0;} }
}
@keyframes catch {
	0%   {opacity: 0; }
	100% {opacity: 1; bottom: 0;} }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.