リロードすると左から右に流れる文字にアニメーションしたい。

Question

表題の通りです。
勉強中のもので、いろんな表現を試しているのですが、
spanタグの乱用には目を瞑っていただいて、アドバイスいただきたいと思っています。

以下の記述を、今度はSetTimeoutを使用して
リロード後、10秒でh1_titleを表示させ
リロード後30秒でh1_styleを表示させたいと思っています。

（現在は1回スクロールが必要です）

どのように記述すればいいか悩んでおります。

どうぞよろしくお願いします。

<div class="titleText">
<h1 class="h1_title">Select<span class="cover"></span></h1><p class="h1_style">選ばれる理由<span class="cover2"></span></p></div>

.titleText{
	width:1000px;
	margin:0 auto;
	padding-top:46px;
}
.h1_title{
	color:#fff;
	font-size:18px;
	background-color: #2174bb;
	display: block;
	padding-left:20px;
	width:70px;
	font-weight: lighter;	
	opacity: 1;
	transition: all .5s ease;
	transform: scaleX(0,0);
	position: relative;
	overflow: hidden;
}
.cover{
position: absolute;
	left:0;
	top:0;
	width:90px;
	background-color: #121212;
	transition: all .5s ease;
	height: 26px;
	
}
.cover_out{
	position: absolute;
	left:90px;
	top:0;
	width:90px;
	background-color: #121212;
	transition: all .5s ease;
	height: 26px;
	
	
}
.h1_style{
	font-size:30px;
	background-color: #fff;
	width: 200px;
/*	height: 34px;*/
	color:#333;
	font-weight: lighter;
	display: block;
	padding-left:20px;
	padding-top:10px;
	margin-top:10px;
	padding-bottom:10px;
	opacity: 1;
	transition: all .5s ease;
	transform: scaleX(0,0);
	position: relative;
	overflow: hidden;
}
.cover2{
position: absolute;
	left:0;
	top:0;
	width:240px;
	background-color: #121212;
	transition: all .5s ease;
	height: 46px;

	
}
.cover_out2{
	position: absolute;
	left:220px;
	top:0;
	width:240px;
	background-color:#121212;
	transition: all .5s ease;
	height: 46px;
}

	 $(function(){

  $(window).scroll(function(){
         var  scroll = $(window).scrollTop();
          if (scroll > 20){
              $('.cover').addClass('cover_out');
          }else{
              $('.cover').removeClass('cover_out');
          }
  }); 
  });
	
		 $(function(){
  $(window).scroll(function(){
         var  scroll = $(window).scrollTop();
          if (scroll > 20){
              $('.cover2').addClass('cover_out2');
          }else{
              $('.cover2').removeClass('cover_out2');
          }
  }); 
  });

Answer 1

今なら、jQueryを使わなくても CSS だけで簡単に実装できます。

.cover{
  position: absolute;
  left: 0;
  top: 0;
  width:90px;
  background-color: #121212;
  height: 26px;
  animation: .5s ease 10s forwards coverout;
}

.cover2{
  position: absolute;
  left:0;
  top:0;
  width:240px;
  background-color: #121212;
  height: 46px;
  animation: .5s ease 30s forwards coverout;
}

@keyframes coverout {
  0% {
    left:0;
  }
  100% {
    left: 100%;
  }
}

【CSS3】@keyframes と animation 関連のまとめ - Qiita

Comments

[ema-material]

ありがとうございます。
アドバイスを反映して以下のように変更しました。

<div class="titleText">
<h1 class="h1_title">Select<span class="cover"></span></h1><p class="h1_style">選ばれる理由<span class="cover2"></span></p></div>

.h1_title{
color:#efefef;
font-size:18px;
/* background-color: #2174bb;*/

padding-left:20px;
width:70px;
font-weight: lighter;
opacity: 1;
transition: all .5s ease;
transform: scaleX(0,0);
position: relative;

}
.cover{
position: absolute;
left: 0;
top: 0;
width:90px;
background-color: #121212;
height: 26px;
animation: .3s ease 1s forwards sizeScale;
z-index: -1;
opacity: 0;

}
.h1_style{
font-size:30px;
/* background-color: #fff;*/
width: 200px;
/* height: 34px;*/
color:#efefef;
font-weight: lighter;
display: block;
padding-left:20px;
padding-top:10px;
margin-top:10px;
padding-bottom:10px;
opacity: 1;
transition: all .5s ease;
transform: scaleX(0,0);
position: relative;
overflow: hidden;
}
.cover2{
position: absolute;
left:0;
top:0;
width:240px;
background-color: #121212;
height: 46px;
animation: .3s ease 2s forwards sizeScale;
z-index: -1;
opacity: 0;

}
@keyframes sizeScale {
0% {
width:0%;
opacity: 0;
}
100% {
width: 100%;
opacity: 1;
}
}