Animations

Animations

<Button.Animations>
  <FadeIn Duration="180" Delay="0" Easing="EaseOut" Trigger="Loaded" />
  <ScaleTo Duration="120" From="0.96" To="1" Trigger="Hover" />
  <Pulse Duration="600" Repeat="Infinite" Trigger="Click" />
</Button.Animations>

Animation types

Common attributes

• Duration: milliseconds, default 300
• Delay: milliseconds, default 0
• Easing: Linear / Ease / EaseIn / EaseOut / EaseInOut
• Repeat: number or Infinite
• Trigger: Loaded / Hover / Click

Default animation takeover

• Declaring Animations takes over only that node’s default transition; other nodes keep the launcher defaults
• Declaring Effects takes over only the Effect and leaves default animations alone
• Both can be declared together

<Button Text="Emphasized">
  <Button.Effects>
    <ShadowEffect Radius="8" Color="Black" />
  </Button.Effects>
  <Button.Animations>
    <FadeIn Duration="180" Trigger="Loaded" />
  </Button.Animations>
</Button>

Triggers

• Loaded: play after mount
• Hover: play on pointer enter
• Click: play while pressed (CSS :active)

Limits

• Animations do not trigger data loading or actions; use Trigger for event logic
• Click currently plays on the pressed state, not a full click state machine
• transform animations and transform effects can override each other; use one transform style per node