文字や要素が弾むバウンドアニメーションのCSSサンプル集
文字やボールなどの要素を弾ませるバウンドアニメーションのCSSサンプル集です。
このページの各アニメーションにanimationプロパティと@keyframes（キーフレーム）を使ったサンプルコードを紹介しています。
ボールをバウンドアニメーションで弾ませるCSSサンプル
See the Pen CSS bound ball Animation by yochans (@yochans) on CodePen.
ボールがバウンドするシンプルなCSSアニメーションサンプルです。
ボール部分と影部分のアニメーションを作成しています。
<div class="container">
<span class="ball"></span>
<span class="shadow"></span>
</div>コンテナとボールのCSS
.bound-container{
position:relative;
width:100%;
height:350px;
}
/*ボール*/
.ball{
position: absolute;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: auto;
width:100px;
height:100px;
border-radius: 50%;
background:#0091EA;
opacity:0.6;
animation: bound-anim 1s infinite;
}
@keyframes bound-anim {
0%,100% {top: 0;transform: scale(1);}
30% {top: -60%; transform: scale(0.96,1.04);}
60% {transform: scale(1);}
90% {top: 0;transform: scale(1.15,0.9);}
}影のCSS
影はfilterのopacity（透過）やblur（ぼかし）を使っていますが、rgbaでの色指定やbox-shadowでぼやかしていった方が好きな方も多いかもしれません。
/*影*/
.shadow{
position: absolute;
left: 0;
right: 0;
top:0;
bottom: -95px;/*対象のheightと微調節*/
margin: auto;
width: 60px;
height: 10px;
border-radius: 50%;
background: #000;
filter: blur(6px);
opacity:0.9;
animation: shadow-anim 1s infinite;
}
@keyframes shadow-anim {
0%,100% {transform: scale(1);filter: blur(4px);}
30% {transform: scale(1.6,1);filter: blur(8px);}
}テキストをバウンドアニメーションで弾ませるCSSサンプル
See the Pen CSS bound Animation (text) by yochans (@yochans) on CodePen.
テキストを弾ませる感じにしているバウンドアニメーションのサンプルです。
影はボールと同じ感じの設定では微妙だったのでナシにしました。
<div class="container">
<p class="bound">
<span>ONE NOTE</span>
</p>
</div>CSS
.container{
position:relative;
width:100%;
height:350px;
}
/*フォント*/
.bound span{
position: absolute;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: auto;
font-size:5em;
font-weight:bold;
color:#0091EA;
text-align:center;
width:500px;
height:100px;
animation: bound-anim 0.8s infinite;
}
@keyframes bound-anim {
0%,100% {top: 0;transform: scale(1);}
30% {top: -25%;}
50% {transform: scale(1);}
90% {top: 0;transform: scale(1.1,0.8);}
}一文字ずつバウンドする間隔を変更したバージョン
See the Pen CSS bound Animation (text) by yochans (@yochans) on CodePen.
一文字ずつ順番に弾む感じにした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>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);}
}順番にバウンドさせるには、spanで区切った文字毎にアニメーションを割り当てます。
アニメーションの開始時間を少しずつズラすことで左から順番に弾む感じを演出。
テキストの位置はサンプルでは中央揃えをしている為、文字数に合わせて-3、-2、-1、0、1、2、3の様に真ん中の文字が中央にくるようにしています。