CSS Animation Keyframes Generator

**Context**: 
CSS animations are a powerful tool for creating engaging and interactive web experiences. Keyframe animations allow developers to define specific points in an animation sequence, enabling fine-grained control over the animation's progression. However, writing CSS keyframe animations can be tedious and time-consuming, especially for complex animations. A CSS Animation Keyframes Generator would simplify this process by automatically generating the necessary CSS code based on user input.

**Detailed Instructions**: 
Design a CSS Animation Keyframes Generator that takes in a set of parameters and produces a CSS code snippet defining a keyframe animation. The generator should accept the following parameters:
- Animation name: a string identifying the animation
- Duration: the length of the animation in seconds or milliseconds
- Timing function: a string specifying the timing function (e.g., linear, ease, cubic-bezier)
- Keyframe definitions: a list of keyframe objects, each containing:
  - Percentage: a number between 0 and 100 representing the keyframe's position in the animation sequence
  - Styles: a set of CSS styles (e.g., opacity, transform, background-color) with their corresponding values
- Optional parameters: iteration count, direction, fill mode, and delay

Using these parameters, generate a CSS code snippet that defines the keyframe animation using the `@keyframes` rule. Ensure the generated code is valid, efficient, and follows best practices for CSS animations.

**Output Format**: 
The output should be a string containing the generated CSS code, formatted according to standard CSS conventions. The code should include the `@keyframes` rule with the specified animation name, duration, timing function, and keyframe definitions. If optional parameters are provided, they should be incorporated into the animation definition.

**Examples**: 
Input:
- Animation name: `fadeIn`
- Duration: `2s`
- Timing function: `ease-in-out`
- Keyframe definitions:
  - `{ percentage: 0, styles: { opacity: 0 } }`
  - `{ percentage: 100, styles: { opacity: 1 } }`
- Optional parameters: `iteration count: infinite`, `direction: alternate`

Output:
```css
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeIn 2s ease-in-out infinite alternate;
}
```
Input:
- Animation name: `rotate`
- Duration: `4s`
- Timing function: `linear`
- Keyframe definitions:
  - `{ percentage: 0, styles: { transform: 'rotate(0deg)' } }`
  - `{ percentage: 50, styles: { transform: 'rotate(180deg)' } }`
  - `{ percentage: 100, styles: { transform: 'rotate(360deg)' } }`

Output:
```css
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 4s linear;
}
```