鼓動【CSSアニメーション】

適用例

アニメ1(文字のスケール)

アニメ2(ボックスのパディング)

組み合わせ

コード

アニメ1

/*アニメーション(鼓動) */
.Anm1{
display:inline-block;
animation-name: H-beat1;
animation-duration: 1.2s;/*総時間*/
animation-timing-function: ease;/*動き*/
animation-delay: 0s;/*遅延時間*/
animation-iteration-count: infinite;/*ループ回数*/
animation-direction: normal;/*動きの方向(一方方向)*/
/*animation-direction: alternate;/*動きの方向(交互反転)*/
animation-fill-mode: both;/*キーフレームの適用*/
/*animation-play-state: running;/*再生か一時停止*/
}

@keyframes H-beat1{
0%{transform:scale(1,1);}
3%{transform:scale(0.9,0.9);}
7%{transform:scale(1.4,1.4);}
22%{transform:scale(1.05,1.05);
42%{transform:scale(1,1);}
}

アニメ2

/*ボックス*/
.Anm2{
padding:0.5em 1em;
animation-name: X-pand1;
animation-duration: 1.2s;/*総時間*/
animation-timing-function: ease;/*動き*/
animation-delay: 0s;/*遅延時間*/
animation-iteration-count: infinite;/*ループ回数*/
animation-direction: normal;/*動きの方向(一方方向)*/
/*animation-direction: alternate;/*動きの方向(交互反転)*/
animation-fill-mode: both;/*キーフレームの適用*/
/*animation-play-state: running;/*再生か一時停止*/}

@keyframes X-pand1{
0%{padding:0.5em 1em;}
6%{padding:0.5em 1em;}
9%{padding:0.5em 3em;}
12%{padding:0.5em 0.55em;}
14%{padding:0.5em 1.38em;}
16%{padding:0.5em 0.7em;}
18%{padding:0.5em 1.23em;}
20%{padding:0.5em 0.8em;}
22%{padding:0.5em 1.1em;}
24%{padding:0.5em 0.94em;}
26%{padding:0.5em 1.04em;}
28%{padding:0.5em 1em;}
}