feat(alert): disable fade-in animation by default

src/components/alert/alert/alert.scss

@@ -19,10 +19,9 @@ $open-anim-opacity-to: 1;
   --sbb-alert-icon-size: #{sbb.px-to-rem-build(20)};
   --sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
-  --sbb-alert-animation-duration: var(
-    --sbb-disable-animation-zero-time,
-    var(--sbb-animation-duration-6x)
-  );
+
+  // By default, the open animation is disabled
+  --sbb-alert-open-animation-duration: 0.1ms;
 
   @include sbb.mq($from: medium) {
     --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)};
@@ -36,6 +35,10 @@ $open-anim-opacity-to: 1;
   }
 }
 
+:host(.sbb-animate) {
+  --sbb-alert-open-animation-duration: var(--sbb-animation-duration-6x);
+}
+
 :host([size='l']) {
   --sbb-alert-icon-size: var(--sbb-size-icon-ui-small);
 

src/components/alert/alert/readme.md

@@ -73,7 +73,7 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 
 ## Animation
 
-Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+By default, the `sbb-alert` does not have an open animation. Add the `.sbb-animate` class to the element to enable a fade-in animation.
 
 <!-- Auto Generated Below -->