Elegance Sophistication

dylantarre/animation-principles/skills/06-by-emotional-outcome/elegance-sophistication

作者 dylantarre83597134ba8f無授權條款99 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫9 個月前更新

Use when creating animations that convey luxury, refinement, or premium brand experiences.

僅含說明Design & Creative
AI 產生的概覽

依據迪士尼動畫原則、時間建議與 CSS 緩動,指導創作克制而奢華的動畫效果。

功能
這項技能提供設計指引,用來製作傳達精緻、奢華與低調質感的動畫。它把迪士尼動畫原則對應到優雅風格,針對擠壓拉伸、預備動作、場面調度、跟隨動作、緩動、弧線、時間與誇張程度提出建議。它也提供淡入、滑動、縮放與揭示的時間建議、CSS 緩動變數、一個關鍵影格揭示動畫範例,以及設計原則和適用情境。
適用情境
適用於為精品品牌網站、時尚與珠寶、高端房地產、高級訂閱、美術館與博物館、高級餐飲、精品旅館或高階主管儀表板製作動效。適合重視細膩高品質動效而非數量堆砌的專案。
執行需求
不需要指令碼或特殊工具,僅為說明性內容。套用其中的 CSS 範例需要專案支援 CSS 動畫。

Elegance & Sophistication Animation

Create animations that convey refinement, luxury, and understated excellence.

Emotional Goal

Elegance emerges from restrained, perfectly timed motion. Sophistication means animations that are noticed for their quality, not their quantity—subtle excellence over obvious effort.

Disney Principles for Elegance

Squash & Stretch

Extremely minimal (0-5%). Refined objects don't deform—they glide. Preserve perfect proportions throughout motion.

Anticipation

Subtle, refined preparation (100-150ms). A gentle weight shift, not a wind-up. Elegant motion begins smoothly.

Staging

Negative space and restraint. Let elements breathe. Single focal point with generous margins. Less is more.

Straight Ahead Action

Avoid. Elegance requires control and precision. Every frame should be intentional and refined.

Follow Through & Overlapping Action

Graceful, extended settling. Like silk falling. Long, smooth deceleration without bounce or wobble.

Slow In & Slow Out

Extended easing on both ends. Gradual, flowing motion. cubic-bezier(0.4, 0, 0.2, 1) for refined transitions.

Arc

Sweeping, graceful curves. Like a conductor's baton or a dancer's arm. Beautiful paths, not just endpoints.

Secondary Action

Minimal, purposeful accents. A subtle shadow shift, a gentle highlight. Supporting motion that elevates, not distracts.

Timing

Unhurried but not slow (300-500ms). Time to appreciate the motion. Luxury doesn't rush.

Exaggeration

Almost none (0-10%). Realistic, refined movements. Perfection in subtlety.

Solid Drawing

Impeccable proportions maintained. No distortion. Geometric precision and balance.

Appeal

Clean lines, perfect proportions. Monochromatic or limited palette. Timeless aesthetics.

Timing Recommendations

ElementDurationEasing
Fade300-400msease-in-out
Slide400-500msease-out
Scale350-450msease-in-out
Reveal500-700msease-out

CSS Easing

css
--elegant-smooth: cubic-bezier(0.4, 0, 0.2, 1);--elegant-enter: cubic-bezier(0.0, 0, 0.2, 1);--elegant-flow: cubic-bezier(0.45, 0, 0.55, 1);

Refined Transitions

css
@keyframes elegant-reveal {  from {    opacity: 0;    transform: translateY(10px);  }  to {    opacity: 1;    transform: translateY(0);  }}
.elegant-element {  animation: elegant-reveal 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;}

Design Principles

  • White space is active, not empty
  • Motion reveals content, doesn't decorate it
  • Timing shows confidence and quality
  • Every animation earns its place
  • Restraint demonstrates mastery

When to Use

  • Luxury brand sites
  • Fashion and jewelry
  • High-end real estate
  • Premium subscriptions
  • Art galleries and museums
  • Fine dining
  • Boutique hotels
  • Executive dashboards

來源與署名

來源:dylantarre/animation-principles位於skills/06-by-emotional-outcome/elegance-sophistication提交8359713

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架