power-confidence

パワーと自信を伝えるアニメーション

強さ、権威、圧倒的な存在感を伝えるアニメーションを作成します。

感情的な目標

パワーは、意図的で制御された重みのある動きから生まれます。自信とは、進む先を正確に把握し、確信を持って到達するアニメーションです。

パワーを表現するディズニーの原則

スクワッシュ＆ストレッチ

ストレッチは最小限にし、圧縮を印象的にします。重い物体は伸びません。衝撃を受けたときに圧縮されます（10〜15％）。柔軟さよりも、重さと堅牢さを重視します。

予備動作

意図的で自信に満ちた準備動作（100〜200ms）にします。ためらいではなく、力を蓄える動きです。獲物に襲いかかる前の捕食者のような動きです。

演出

支配的な位置取りにします。大きなスケールで、舞台の中央に配置します。力強い要素は、動きではなく存在感によって注目を集めます。

ストレート・アヘッド・アクション

避けてください。パワーには意図と制御が必要です。すべての動きを自発的ではなく、意図的にします。

フォロースルーとオーバーラッピング・アクション

減速を制御します。重い要素は跳ね返らず、威厳をもって落ち着きます。フォロースルーは短く、決然とさせます。

スローインとスローアウト

強いイーズアウトと急停止を組み合わせます。素早く加速し、決然と着地させます。力強く到達させるには、cubic-bezier(0.0, 0, 0.2, 1) を使います。

アーク

直線的な軌道を優先します。パワーは最短距離を進みます。弧を描く場合は、突進する雄牛のように低く、力強く進ませます。

セカンダリー・アクション

衝撃的な波紋や衝撃波を使います。パワーが着地すると、周囲が反応します。さりげない画面揺れや、放射状に広がる力を加えます。

タイミング

終点が決然とした、中速から高速の動き（150〜300ms）にします。急ぎすぎず、ゆっくりしすぎない、意図的な速度にします。

誇張

適度に誇張します（15〜25％）。動きではなく、衝撃を増幅します。重要なのは、そこに至るまでの動きより着地です。

立体感のある描画

重厚で、地に足の着いた形状にします。力強い幾何学的な形を使います。すべてのフレームで安定感と質量を表現します。

魅力

大胆で角張ったデザインにします。コントラストを高めます。暗く、彩度の高い色を使います。圧倒的な存在感を与えます。

タイミングの推奨値

要素	継続時間	イージング
入場	200〜300ms	ease-out
衝撃	100〜150ms	ease-out
落ち着き	150〜200ms	ease-out
トランジション	250〜350ms	ease-in-out

CSS イージング

--power-strike: cubic-bezier(0.0, 0, 0.2, 1);
--power-land: cubic-bezier(0.16, 1, 0.3, 1);
--power-drive: cubic-bezier(0.25, 0.1, 0.25, 1);

衝撃アニメーション

@keyframes power-land {
  0% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0;
  }
  60% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

重さの表現

• 大きな要素ほどゆっくりアニメーションさせます
• 力強い要素は周囲に影響を与えます
• 衝撃時に短い圧縮を加えます
• すばやく、制御された状態に戻します

使用する場面

• ヒーローセクションと見出し
• プレミアム製品のショーケース
• ブランドのメッセージ
• 実績の表示
• ダッシュボードの主要指標
• エグゼクティブ向けプレゼンテーション
• 自動車および高級ブランド
• スポーツおよびフィットネスアプリ