feat: remove css animations support for ionic animations (#29123)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Ionic Framework provides a small utility wrapper around the Web
Animations API. Historically not all browsers that Ionic Framework
supported, had support for the Web Animations API. To offer backwards
compatibility, Ionic Framework provided fallback behaviors for the
different wrapped APIs.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removes the legacy CSS animations fallback behavior from the Web
Animations API animation utility. Maintaining a few no-op behaviors for
test environments.
- Resolved a few internal type usages that were casting to any
- Removed spec tests that were testing the fallback CSS animations
behavior and/or already had test coverage from other unit tests.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->

All modern browsers support the Web Animations API today. If a developer
needs to target an older browser that does not support Web Animations,
they should either use [a
polyfill](https://github.com/web-animations/web-animations-js), or
implement the fallback behavior themselves.

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Liam DeBeasi <[email protected]>

Author: sean-perkins

BREAKING.md

@@ -60,8 +60,11 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 | iOS      | 15+                    |
 | Android  | 5.1+ with Chromium 89+ |
 
+Ionic Framework v8 removes backwards support for CSS Animations in favor of the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). All minimum browser versions listed above support the Web Animations API.
+
 <h2 id="version-8x-dark-mode">Dark Mode</h2>
 
+
 In previous versions, it was recommended to define the dark palette in the following way:
 
 ```css

core/src/utils/animation/animation-utils.ts

@@ -1,41 +1,5 @@
-import type { AnimationKeyFrames } from './animation-interface';
-
 let animationPrefix: string | undefined;
 
-/**
- * Web Animations requires hyphenated CSS properties
- * to be written in camelCase when animating
- */
-export const processKeyframes = (keyframes: AnimationKeyFrames) => {
-  keyframes.forEach((keyframe) => {
-    for (const key in keyframe) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (keyframe.hasOwnProperty(key)) {
-        const value = keyframe[key];
-
-        if (key === 'easing') {
-          const newKey = 'animation-timing-function';
-          keyframe[newKey] = value;
-          delete keyframe[key];
-        } else {
-          const newKey = convertCamelCaseToHypen(key);
-
-          if (newKey !== key) {
-            keyframe[newKey] = value;
-            delete keyframe[key];
-          }
-        }
-      }
-    }
-  });
-
-  return keyframes;
-};
-
-const convertCamelCaseToHypen = (str: string) => {
-  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-};
-
 export const getAnimationPrefix = (el: HTMLElement): string => {
   if (animationPrefix === undefined) {
     const supportsUnprefixed = el.style.animationName !== undefined;
@@ -50,99 +14,6 @@ export const setStyleProperty = (element: HTMLElement, propertyName: string, val
   element.style.setProperty(prefix + propertyName, value);
 };
 
-export const removeStyleProperty = (element: HTMLElement, propertyName: string) => {
-  const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
-  element.style.removeProperty(prefix + propertyName);
-};
-
-export const animationEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent) => void) => {
-  let unRegTrans: (() => void) | undefined;
-  const opts: AddEventListenerOptions = { passive: true };
-
-  const unregister = () => {
-    if (unRegTrans) {
-      unRegTrans();
-    }
-  };
-
-  const onTransitionEnd = (ev: Event) => {
-    if (el === ev.target) {
-      unregister();
-      callback(ev as TransitionEvent);
-    }
-  };
-
-  if (el) {
-    el.addEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-    el.addEventListener('animationend', onTransitionEnd, opts);
-
-    unRegTrans = () => {
-      el.removeEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-      el.removeEventListener('animationend', onTransitionEnd, opts);
-    };
-  }
-
-  return unregister;
-};
-
-// TODO(FW-2832): type
-export const generateKeyframeRules = (keyframes: any[] = []) => {
-  return keyframes
-    .map((keyframe) => {
-      const offset = keyframe.offset;
-
-      const frameString = [];
-      for (const property in keyframe) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (keyframe.hasOwnProperty(property) && property !== 'offset') {
-          frameString.push(`${property}: ${keyframe[property]};`);
-        }
-      }
-
-      return `${offset * 100}% { ${frameString.join(' ')} }`;
-    })
-    .join(' ');
-};
-
-const keyframeIds: string[] = [];
-
-export const generateKeyframeName = (keyframeRules: string) => {
-  let index = keyframeIds.indexOf(keyframeRules);
-  if (index < 0) {
-    index = keyframeIds.push(keyframeRules) - 1;
-  }
-  return `ion-animation-${index}`;
-};
-
-export const getStyleContainer = (element: HTMLElement) => {
-  // getRootNode is not always available in SSR environments.
-  // TODO(FW-2832): types
-  const rootNode = element.getRootNode !== undefined ? (element.getRootNode() as any) : element;
-  return rootNode.head || rootNode;
-};
-
-export const createKeyframeStylesheet = (
-  keyframeName: string,
-  keyframeRules: string,
-  element: HTMLElement
-): HTMLElement => {
-  const styleContainer = getStyleContainer(element);
-  const keyframePrefix = getAnimationPrefix(element);
-
-  const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
-  if (existingStylesheet) {
-    return existingStylesheet;
-  }
-
-  const stylesheet = (element.ownerDocument ?? document).createElement('style');
-  stylesheet.id = keyframeName;
-  stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;
-
-  styleContainer.appendChild(stylesheet);
-
-  return stylesheet;
-};
-
 export const addClassToArray = (classes: string[] = [], className: string | string[] | undefined): string[] => {
   if (className !== undefined) {
     const classNameToAppend = Array.isArray(className) ? className : [className];