From 9075996734acd3e41da040a1ae00a12c993e15fa Mon Sep 17 00:00:00 2001 From: Arpan Patra Date: Tue, 23 Jun 2026 02:33:46 +0530 Subject: [PATCH] feat(examples): add ease-nod --- submissions/examples/ease-nod/README.md | 32 +++++++++++++++++++++++ submissions/examples/ease-nod/demo.html | 34 +++++++++++++++++++++++++ submissions/examples/ease-nod/style.css | 29 +++++++++++++++++++++ 3 files changed, 95 insertions(+) create mode 100644 submissions/examples/ease-nod/README.md create mode 100644 submissions/examples/ease-nod/demo.html create mode 100644 submissions/examples/ease-nod/style.css 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 @@ + + + + + + ease-nod — EaseMotion CSS + + + + +

ease-nod

+

Subtle vertical nod — like nodding in agreement. Great for confirmation micro-interactions.

+ +
+

Demo

+

The card nods once on hover

+
Yes!
+

Hover again to replay.

+
+ +
+

How It Works

+

A one-shot translateY(0) → translateY(6px) → translateY(0) animation triggered by :hover, running for 0.4s.

+
+ + diff --git a/submissions/examples/ease-nod/style.css b/submissions/examples/ease-nod/style.css new file mode 100644 index 0000000000..25c3f77f16 --- /dev/null +++ b/submissions/examples/ease-nod/style.css @@ -0,0 +1,29 @@ +/* ============================================================ + EaseMotion CSS — ease-nod + Subtle vertical nod animation + ============================================================ */ + +.nod-card { + width: 240px; + height: 120px; + margin: 1.5rem auto; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #6366f1, #a78bfa); + border-radius: 14px; + font-weight: 600; + color: #ffffff; + font-size: 1.1rem; + cursor: pointer; +} + +.nod-card:hover { + animation: nod 0.4s ease-in-out; +} + +@keyframes nod { + 0% { transform: translateY(0); } + 50% { transform: translateY(6px); } + 100% { transform: translateY(0); } +}