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 从公开仓库中收录这些内容。

举报或申请下架