文字を回転+着色 | 京都でホームページ制作『みやこデザイン』

やりたいこと。普通にある文字を、あるタイミングで着色し、回転させる。タイミングをjqueryでコンチョローしてクラス付与、CSSでクニュッと曲げちゃう感じ。
まずはHTMLから。

<h2 class="no-bg"><span class="maru bg-orange">2</span>ほにゃらら<span class="anime">徹底</span>サポート</h2>

1	<h2 class="no-bg"><span class="maru bg-orange">2</span>ほにゃらら<span class="anime">徹底</span>サポート</h2>

次にjquery

$(function(){
	var startanime = $(".anime");
	$(window).scroll(function(){
		var startposition = $(startanime).offset().top - $(window).height();
		if ($(window).scrollTop() > startposition + 30) {
				$.each($('.anime'),function(){
				$(this).addClass('migiagari aka');
			});
		}
	});
});

$(function(){

var startanime = $(".anime");

$(window).scroll(function(){

var startposition = $(startanime).offset().top - $(window).height();

if ($(window).scrollTop() > startposition + 30) {

$.each($('.anime'),function(){

$(this).addClass('migiagari aka');

});

}

});

そしてCSS

.maru {
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-size: 26px;
  height: 30px;
  line-height: 30px;
  margin-right: 10px;
  text-align: center;
  width: 30px;
}
.bg-orange {
  background-color: #ff8800;
}
.migiagari {
  display: inline-block;
  padding: 0 5px;
  transform: rotate(-5deg);
  transition: all 0.6s ease 0.6s;
}
.aka {
  color: red;
}

.maru {

border-radius: 50%;

color: #fff;

display: inline-block;

font-size: 26px;

height: 30px;

line-height: 30px;

margin-right: 10px;

text-align: center;

width: 30px;

}

.bg-orange {

background-color: #ff8800;

}

.migiagari {

display: inline-block;

padding: 0 5px;

transform: rotate(-5deg);

transition: all 0.6s ease 0.6s;

}

.aka {

color: red;

}

しっかし我ながらええ加減なクラスの付け方してるよな。。。全然せまんてぃっくじゃない。でもでも、
動いてるよ～。