ユーティリティ
テキストアニメーションをリアルタイムで確認し、CSS・Motionコードとして書き出せるツールです。
文言を入力し、効果とテンポを調整してすぐ確認します。
ランディングページの雰囲気に合う動きを選びます。
持続時間、強度、文字間ディレイ、展開方向を調整できます。
公開前に文字のテンポと視線誘導の強さを確認できます。
8文字 ・ ウェーブ 効果を適用中
現在の設定をCSSまたはMotionテンプレートとしてコピーできます。
/* Text: 움직이는 텍스트 */
<div class="kt-text" aria-label="움직이는 텍스트">
<span class="kt-char kt-char--wave" style="--kt-delay:0ms">움</span>
<span class="kt-char kt-char--wave" style="--kt-delay:60ms">직</span>
<span class="kt-char kt-char--wave" style="--kt-delay:120ms">이</span>
<span class="kt-char kt-char--wave" style="--kt-delay:180ms">는</span>
<span class="kt-char kt-char--wave" style="--kt-delay:240ms"> </span>
<span class="kt-char kt-char--wave" style="--kt-delay:300ms">텍</span>
<span class="kt-char kt-char--wave" style="--kt-delay:360ms">스</span>
<span class="kt-char kt-char--wave" style="--kt-delay:420ms">트</span>
</div>
<style>
.kt-text {
display: flex;
flex-wrap: wrap;
gap: 0.04em;
width: fit-content;
}
.kt-char {
display: inline-block;
white-space: pre;
animation-delay: var(--kt-delay);
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
--kt-intensity: 0.72;
}
.kt-char--wave {
animation-name: kt-wave;
}
@keyframes kt-wave {
0%, 100% { transform: translateY(0); }
35% { transform: translateY(calc(-0.42em * var(--kt-intensity))); }
65% { transform: translateY(calc(0.18em * var(--kt-intensity))); }
}
</style>CSSコード 形式で現在の設定が反映されたコードです。