`@keyframes` not correctly scoped within media queries when optimization is enabled​

[MillerSvt]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

When using Angular with ViewEncapsulation.Emulated and optimization: true, I encounter an issue where CSS animations defined with @keyframes are correctly scoped outside media queries but not within them. This leads to inconsistent behavior across different screen sizes.

Styles (scss)

@keyframes test {
  from {
    background: transparent;
  }
  to {
    background: red;
  }
}

h1 {
  animation: test 1s ease forwards;
}

@media screen and (max-width: 768px) {
  h1 {
    animation: test 1s ease forwards;
  }
}

Output (without optimization)

@keyframes _ngcontent-ng-c1419874505_test {
  from {
    background: transparent;
  }
  to {
    background: red;
  }
}

h1 {
  animation: _ngcontent-ng-c1419874505_test 1s ease forwards;
}

@media screen and (max-width: 768px) {
  h1 {
    animation: _ngcontent-ng-c1419874505_test 1s ease forwards;
  }
}

Output (with optimization)

@keyframes _ngcontent-ng-c1419874505_test {
  from {
    background: transparent;
  }
  to {
    background: red;
  }
}

h1 {
  animation: _ngcontent-ng-c1419874505_test 1s ease forwards;
}

@media screen and (max-width: 768px) {
  h1 {
    animation: test 1s ease forwards;
  }
}

Temporary workaround (scss)

::ng-deep {
  @keyframes test {
    from {
      background: transparent;
    }
    to {
      background: red;
    }
  }
}

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-hha4kwpn

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.0.7
Node: 20.19.0
Package Manager: npm 10.8.2
OS: linux x64

Angular: 19.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1900.7
@angular-devkit/core         19.0.7
@angular-devkit/schematics   19.0.7
@angular/build               19.0.7
@angular/cli                 19.0.7
@schematics/angular          19.0.7
rxjs                         7.8.1
typescript                   5.6.3
zone.js                      0.15.0

Anything else?

No response