twitter
のような「いいねボタン」のアニメーション
twitter
のいいねボタンはパラパラ漫画みたいに画像を切り替えてる(左から右へスライド)
今回は下記画像を作成した。
# css
# backgroundにアニメーションの画像を設定
.heart {
width: 60px;
height: 60px;
background: url(heart_animation.png) no-repeat;
background-size: 2800*0.6px 100*0.6px;
background-position: 0 0;
cursor: pointer;
}
# アニメーションの開始と終了の定義
@keyframes heartBlast {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
//HeartAnimationクラスを持つ要素へアニメーションを付与
.HeartAnimation {
display: inline-block;
background-position: right;
-webkit-animation-name: heartBlast;
animation-name: heartBlast;
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: steps(28);
animation-timing-function: steps(28);
}
今回はアニメーション(いいねボタン)を付けたい箇所に.heart
クラスをもつ要素を入れればOK