【施策レシピ】バナーやアイコンにアニメーションを設定する
このレシピでできること
サポートアクションでの強調表示に加え、アニメーション追加することでさらにクリックを促す効果が期待できます。
必要な機能
- サポートアクション
- ブランド設定（カスタムCSS）
設置例
設定方法
手順1：カスタムCSS記述（ブランド設定）
#rs_sa .c-buttonIcon{
animation: jumpicon 0.5s linear 0.9s 1;
}
@keyframes jumpicon {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
10% { transform: scale(1.1, 0.9) translate(0%, 5%); }
40% { transform: scale(1.2, 0.8) translate(0%, 15%); }
50% { transform: scale(1.0, 1.0) translate(0%, 0%); }
60% { transform: scale(0.9, 1.2) translate(0%, -100%); }
75% { transform: scale(0.9, 1.2) translate(0%, -20%); }
85% { transform: scale(1.2, 0.8) translate(0%, 15%); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
アイコンに限らず、バナーやバッジ、場合によってはコーチマークでも応用できる手法となりますので、ぜひご活用ください。