Acknowledge a tap/click with a ripple that blooms from the exact press point. Fast and low-opacity so it reads as feedback, not decoration. No ripple under prefers-reduced-motion (native :active covers it). Avoid on destructive actions and text links.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
A ripple that blooms from the press point. Part of
motion-anything; obeys MOTION-SPEC.md. Based on the
Material state-layer interaction, reimplemented dependency-free.
ripple.css and ripple.js into the project, and link them.position:relative; overflow:hidden — the CSS sets this):
<button class="ripple">Save</button>
.ripple; a wave spawns at the pointer point and cleans itself up.prefers-reduced-motion; the native :active state provides feedback.animationend.attachRipple(ref.current) in useEffect. The tint comes from the element's
currentColor — set text color to control it.まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Back In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。