How can I alter the dimensions of an image in an animation? Specifically, an animation that starts from a text and goes to an image

Question

My code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes animation {
 from {content: "The image is too large. How would I make it smaller in this animation?";}
 to {content: url(https://cdn.pixabay.com/photo/2022/09/13/13/47/animal-7451969_960_720.jpg);}
}
.ani::before {
  animation: animation 5s linear 0s infinite none;
  content: "Wow";
}
</style>
</head>
<body>
<p class="ani"></p>
</body>
</html>

I want the image content (in the "to" section) to be a specific size without putting the animation in an image box (for the sake of the text it starts with). How would I do this?

score 0 · Answer 1 · answered Sep 18 '22 at 00:38

0

Unfortunately, it isn't possible. See this question

You can use background-image however if this would work for you

answered Sep 18 '22 at 00:38

Zachiah

1,750
7
28

How can I alter the dimensions of an image in an animation? Specifically, an animation that starts from a text and goes to an image

1 Answers1