Using the image that you rotated horizontally, how would you add a 'bounce' animation to the image?

To add a 'bounce' animation to the horizontally rotated image, you can use CSS animations. Here is an example of how you can achieve this:

1. First, apply the horizontal rotation to the image using CSS:

```css
.image {
transform: scaleX(-1);
}
```

2. Next, create a keyframe animation for the bounce effect:

```css
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
```

3. Apply the bounce animation to the image:

```css
.image {
animation: bounce 2s infinite;
}
```

This will make the horizontally rotated image bounce up and down continuously. You can adjust the duration and timing of the animation by changing the values in the keyframes.

Using CSS:

1. Add the `animation-name` property to the image element.
2. Set the `animation-duration`, `animation-iteration-count`, and `animation-direction` properties to define the bounce animation.

CSS Code:

```css
#image {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
```

Explanation:

- The `animation-name` property links the image to the `bounce` animation.
- The `animation-duration` property sets the animation duration to 1 second.
- The `animation-iteration-count` property sets the animation to repeat indefinitely.
- The `animation-direction` property specifies that the animation should alternate between the starting and ending states.
- The `@keyframes bounce` block defines the actual animation, which moves the image 20px upwards and then back to its original position.