CSSを使った文字の無限ループアニメーション

以前、画像を使用したループスライダを紹介していましたが、今回は見出し等の表記文字をCSSで無限ループさせる場合の実装方法をメモ。

HTML

<div class="loop__wrap">
	<div class="loop__text"><span>CSSを使って無限ループさせる文字を記載</span></div>
</div>

CSS

@keyframes textscroll {
	from {
		transform: translateX(0%);
	 }
	 to {
		transform: translateX(-100%);
	}
}
.loop__wrap {
	overflow: hidden;
}
.loop__text {
	display: flex;
}
.loop__text  span {
	white-space: nowrap;
	animation: textscroll 10s infinite linear both;
}

jQuery

if($('.loop__text').length){
	var looptxtSize = $('.loop__text span').width() + 〇px;
	$('.loop__text span').css({'width':looptxtSize + 'px'});
	$('.loop__text').css({'width':looptxtSize * 2 +'px'});
	$('.loop__text').find('span').clone().appendTo('.loop__text');	
}

CSSセレクター「.loop__text span」の箇所で幅を直に設定することでもループスライダーの実装可能ですが、文字数や文字サイズが変わった場合でもそのまま使えることと、同じテキストを複数回記載する必要もなくなるようjQueryを使用しています。