diff --git a/submissions/examples/ease-nod/README.md b/submissions/examples/ease-nod/README.md new file mode 100644 index 0000000000..8d2a270995 --- /dev/null +++ b/submissions/examples/ease-nod/README.md @@ -0,0 +1,32 @@ +# ease-nod + +## What does it do? +Element bobs downward then back up, like nodding in agreement. One-shot 0.4s animation perfect for confirmation micro-interactions. + +## Features +- `translateY(0) → translateY(6px) → translateY(0)` +- One-shot animation (runs once per hover) +- 0.4s ease-in-out timing +- Pure CSS, no JavaScript + +## Usage +```css +.element:hover { + animation: nod 0.4s ease-in-out; +} + +@keyframes nod { + 0% { transform: translateY(0); } + 50% { transform: translateY(6px); } + 100% { transform: translateY(0); } +} +``` + +## Browser Support +- Chrome 1+, Firefox 3.5+, Safari 3.1+ + +## Tech Stack +- HTML + CSS only, no JavaScript + +## Preview +Open `demo.html` directly in browser. diff --git a/submissions/examples/ease-nod/demo.html b/submissions/examples/ease-nod/demo.html new file mode 100644 index 0000000000..10c8edc79f --- /dev/null +++ b/submissions/examples/ease-nod/demo.html @@ -0,0 +1,34 @@ + + +
+ + +Subtle vertical nod — like nodding in agreement. Great for confirmation micro-interactions.
+ +The card nods once on hover
+Hover again to replay.
+A one-shot translateY(0) → translateY(6px) → translateY(0) animation triggered by :hover, running for 0.4s.