目立たせる
パルス（拡大して戻る）Pulse
一瞬だけ大きくなって、元の大きさに戻る。
AIへの指示例上の調整が入ります
スライド用（PowerPoint・Canva を操作するAIに）申し込みのボタンは、軽く拡大して元に戻る強調（パルス）を1回付けてください。長さは0.6秒で、始めと終わりがゆっくりになる（イーズインアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）ボタンを0.6秒で112%まで拡大して100%に戻すパルスを1回入れてください。速さの変わり方はイーズインアウト（ease-in-out）。
細かい指定動画を作る人・細かく指示したい人向け
- 長さ
- 0.6秒（拡大と戻りを合わせて）
- いちばん大きいとき
- 112%
- 速さの変わり方
- イーズインアウト（ease-in-out）
- 曲線の数値
- cubic-bezier(0.42, 0, 0.58, 1)
- くり返し
- 1回
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。
<button class="fb-pulse">今すぐ申し込む</button>
<style>
.fb-pulse {
animation: fb-pulse 0.6s ease-in-out both;
}
@keyframes fb-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); } /* いちばん大きいとき */
}
/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
.fb-pulse { animation: none; transition: none; }
}
</style>
- どう動くか
- 位置は変えずに、少し大きくなってから元に戻ります。押してほしいボタンや、見てほしい数字に一度だけ目を向けてもらえます。
- 使う場面
- 申し込みのボタン、結論の数字、新しく変わった部分。
- やりすぎに注意
- くり返し続けると、うるさく感じて逆に無視されます。1〜2回で止めるのが目安です。
