css 文字がジャンプする

24.06.21

文字がジャンプするアニメーションをCSSだけで作成する方法を紹介します。デモはこちらからご覧いただけます。

html

<div class="container">
  <p class="bound">
    <span>O</span>
    <span>N</span>
    <span>E</span>
    <span>N</span>
    <span>O</span>
    <span>T</span>
    <span>E</span>
  </p>
</div>

O

N

E

N

O

T

E

</div>

css

.container{
  position:relative;
  width:100%;
  height:300px;
}

/*フォント*/
.bound span{
  font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  bottom: 50px;
  margin: auto;
  font-size:5em;
  font-weight:bold;
  color:#0091EA;
  text-align:center;
  width:100px;
  height:100px;
}


/*アニメーション指定
文字数に合わせてleftや開始時間（2つ目のs）を設定する*/
.bound span:nth-child(1){ left:-4.2em; animation: bound-anim 0.8s 0.0s infinite;}
.bound span:nth-child(2){ left:-2.8em; animation: bound-anim 0.8s 0.1s infinite;}
.bound span:nth-child(3){ left:-1.4em; animation: bound-anim 0.8s 0.2s infinite;}

.bound span:nth-child(4){ left: 0.0em; animation: bound-anim 0.8s 0.3s infinite;}

.bound span:nth-child(5){ left: 1.4em; animation: bound-anim 0.8s 0.4s infinite;}

.bound span:nth-child(6){ left: 2.8em; animation: bound-anim 0.8s 0.5s infinite;}

.bound span:nth-child(7){ left: 4.2em; animation: bound-anim 0.8s 0.6s infinite;}


/*アニメーションキーフレーム
小さいフォントサイズの場合はtopの数値も縮小すると飛び過ぎない*/
@keyframes bound-anim {
  0%,100% {top: 0;transform: scale(1);}
  30% {top: -25%;}
  50% {transform: scale(1);}
  90% {top: 0;transform: scale(1.2,0.8);}
}

.container{

position:relative;

width:100%;

height:300px;

}

/*フォント*/

.bound span{

font-family: Consolas, 'Courier New', Courier, Monaco, monospace;

position: absolute;

left: 0;

right: 0;

top:0;

bottom: 50px;

margin: auto;

font-size:5em;

font-weight:bold;

color:#0091EA;

text-align:center;

width:100px;

height:100px;

}

/*アニメーション指定

文字数に合わせてleftや開始時間（2つ目のs）を設定する*/

.bound span:nth-child(1){ left:-4.2em; animation: bound-anim 0.8s 0.0s infinite;}

.bound span:nth-child(2){ left:-2.8em; animation: bound-anim 0.8s 0.1s infinite;}

.bound span:nth-child(3){ left:-1.4em; animation: bound-anim 0.8s 0.2s infinite;}

.bound span:nth-child(4){ left: 0.0em; animation: bound-anim 0.8s 0.3s infinite;}

.bound span:nth-child(5){ left: 1.4em; animation: bound-anim 0.8s 0.4s infinite;}

.bound span:nth-child(6){ left: 2.8em; animation: bound-anim 0.8s 0.5s infinite;}

.bound span:nth-child(7){ left: 4.2em; animation: bound-anim 0.8s 0.6s infinite;}

/*アニメーションキーフレーム

小さいフォントサイズの場合はtopの数値も縮小すると飛び過ぎない*/

@keyframes bound-anim {

0%,100% {top: 0;transform: scale(1);}

30% {top: -25%;}

50% {transform: scale(1);}

90% {top: 0;transform: scale(1.2,0.8);}

}

このコードを使うと、文字が順番にジャンプするアニメーションをCSSだけで実現できます。

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« SSL証明書を証明書としてダウンロードする方法

2024年度版 Googleアナリティクスコンバージョン設定方法 »

2024.06.28 HTML/CSSの基本: 初心者Webデザイナー向けガイド
2024.06.25 SSL証明書を証明書としてダウンロードする方法
2018.11.20 フォトショップやイラレで使っているフォントを他のＰＣに引っ越す方法
2019.04.05 マウスオーバーした時に画像がふわっと大きくなる方法
2023.12.20 ACF(Advanced Custom Fields)編集画面にフィールドが出ない場合の対策
2018.11.20 wordpress 基本タグ各種

css 文字がジャンプする

html

css

お役に立てましたらadsenseクリックお願いします！

関連記事