Angular Keyframe Animation Generator

This challenge focuses on creating a utility function in Angular that generates keyframe animation definitions suitable for use with Angular's animate method. Keyframe animations allow for complex, multi-stage transitions, and this function will simplify their creation by taking a series of style changes and timings as input and producing a valid keyframe animation object. This is useful for creating sophisticated UI transitions beyond simple linear animations.

Problem Description

You are tasked with creating a TypeScript function called generateKeyframeAnimation that takes an array of keyframe objects and returns a valid Angular animation keyframe definition. Each keyframe object will contain two properties: styles (an object representing style changes) and delay (a number representing the delay in milliseconds before applying the styles). The function should construct a keyframe animation object that can be directly used within an Angular animate trigger.

What needs to be achieved:

• Create a function that accepts an array of keyframe objects.
• Each keyframe object should have styles (object) and delay (number) properties.
• The function should return a valid Angular animation keyframe definition object.

Key Requirements:

• The returned object should conform to the expected structure for Angular's animate method.
• The delay property of each keyframe should be correctly applied.
• The styles property of each keyframe should be correctly applied.
• Handle cases where the input array is empty.

Expected Behavior:

When the function receives a valid array of keyframes, it should return a keyframe animation object. If the input array is empty, it should return an empty array.

Edge Cases to Consider:

• Empty input array.
• Invalid delay values (negative numbers). While the animation system might handle these, it's good to consider.
• styles object containing invalid CSS properties (not strictly required to validate, but good to be aware of).

Examples

Example 1:

Input: [
  { styles: { opacity: 0, transform: 'scale(0)' }, delay: 0 },
  { styles: { opacity: 1, transform: 'scale(1)' }, delay: 200 }
]
Output: [
  { delay: 0, styles: { opacity: 0, transform: 'scale(0)' } },
  { delay: 200, styles: { opacity: 1, transform: 'scale(1)' } }
]
Explanation: The input array is transformed into an array of keyframe objects, preserving the order and properties of each keyframe.

Example 2:

Input: []
Output: []
Explanation: An empty input array results in an empty array being returned.

Example 3:

Input: [
  { styles: { color: 'red' }, delay: 100 },
  { styles: { color: 'blue', fontSize: '20px' }, delay: 300 }
]
Output: [
  { delay: 100, styles: { color: 'red' } },
  { delay: 300, styles: { color: 'blue', fontSize: '20px' } }
]
Explanation: Multiple style properties within a single keyframe are correctly handled.

Constraints

• The delay property must be a number.
• The styles property must be an object.
• The function must be written in TypeScript.
• The function should be performant enough to handle arrays with up to 10 keyframes without noticeable delay.

Notes

• Consider using the spread operator (...) for creating new objects to avoid modifying the original keyframe objects.
• The returned keyframe animation object will be used directly within an Angular animation trigger, so ensure it conforms to the expected format.
• Focus on creating a clean and readable function that is easy to understand and maintain. Error handling for invalid input types is not strictly required for this challenge, but good practice.