WPF CAT12 → Web Animation

Cherry Blossom
Animation Playground

WPF Storyboard 애니메이션 기법을 바닐라 JS + CSS로 구현한 봄 테마 플레이그라운드

TranslateTransform RotateTransform ScaleTransform SineEase QuadraticEase
12-1

Cherry Blossom Petal Fall

TranslateTransform.Y + RotateTransform + OpacityAnimation + QuadraticEase

WPF XAML Reference
<DoubleAnimation Storyboard.TargetProperty="Y"
  From="0" To="650" Duration="0:0:4">
  <DoubleAnimation.EasingFunction>
    <QuadraticEase EasingMode="EaseIn"/>
  </DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation TargetProperty="Angle"
  From="0" To="360" RepeatBehavior="Forever"/>
12-2

Petal Scatter Wind

TranslateTransform X/Y + ScaleTransform + Random Velocity + Wind Force

WPF XAML Reference
<DoubleAnimation TargetProperty="X"
  From="0" To="900" Duration="0:0:5"/>
<DoubleAnimation TargetProperty="ScaleX"
  From="1" To="0.3" Duration="0:0:5"/>
<DoubleAnimation TargetProperty="Opacity"
  From="0.9" To="0" Duration="0:0:5"/>
12-3

Spring Breeze Sway

DoubleAnimation AutoReverse Forever + SineEase + TranslateTransform.X Oscillation

WPF XAML Reference
<DoubleAnimation TargetProperty="Angle"
  From="-8" To="8" Duration="0:0:2.5"
  AutoReverse="True" RepeatBehavior="Forever">
  <DoubleAnimation.EasingFunction>
    <SineEase EasingMode="EaseInOut"/>
  </DoubleAnimation.EasingFunction>
</DoubleAnimation>
AI

AI Blooms a Flower

PathAnimation + ScaleTransform + ColorAnimation + StaggeredSequence + ConfettiBurst

Seed
Stem
Leaves
Bloom
Celebrate
WPF XAML Reference — Multi-Category
<!-- CAT5: ScaleTransform morph (petal unfold) -->
<DoubleAnimation TargetProperty="ScaleY" From="0" To="1"
  Duration="0:0:0.8">
  <DoubleAnimation.EasingFunction>
    <ElasticEase Oscillations="1" Springiness="4"/>
  </DoubleAnimation.EasingFunction>
</DoubleAnimation>
<!-- CAT7: Staggered sequence (BeginTime per petal) -->
<DoubleAnimation BeginTime="0:0:0.3" .../>
<!-- CAT10: Glow pulse (DropShadowEffect) -->
<DoubleAnimation TargetProperty="BlurRadius"
  From="5" To="20" AutoReverse="True"/>
<!-- CAT11: Confetti burst (random particles) -->
<DoubleAnimationUsingKeyFrames .../>