How to animate float element while maintaining text wrapping? - html

Question

I'm currently trying to animate an image inside a paragraph. The image is floating to the right, to have the text wrapping around it. I would like to animate the position of this image and having the text wrapping dynamically, how could I achieve that ?
img#img-1 {
animation: top_to_bottom 3s ease-in-out infinite;
float: right;
margin: 10px;
}
#keyframes top_to_bottom {
from {}
50% {
transform: translateY(100px);
}
to {
transform: translateY(0px);
}
}
<img src="https://picsum.photos/200" alt="" id="img-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis elementum nibh tellus. Ullamcorper dignissim cras tincidunt lobortis. Elit eget gravida cum sociis. Etiam sit amet nisl purus in mollis. Sapien et ligula ullamcorper malesuada proin libero. Massa tincidunt nunc pulvinar sapien et. Adipiscing enim eu turpis egestas pretium. Leo integer malesuada nunc vel risus commodo. Nunc consequat interdum varius sit amet mattis vulputate enim.
Vitae aliquet nec ullamcorper sit amet. Sem fringilla ut morbi tincidunt augue. Posuere morbi leo urna molestie at elementum eu facilisis sed. Sed arcu non odio euismod lacinia at quis risus. Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Tellus cras adipiscing enim eu turpis. Vitae ultricies leo integer malesuada. Est ultricies integer quis auctor. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Eu turpis egestas pretium aenean pharetra magna ac. Non blandit massa enim nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Diam sollicitudin tempor id eu nisl nunc mi. Et netus et malesuada fames. Sed enim ut sem viverra aliquet eget. Vel quam elementum pulvinar etiam non quam lacus. Et tortor at risus viverra adipiscing at in.
Libero volutpat sed cras ornare arcu dui vivamus arcu. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Velit dignissim sodales ut eu sem integer vitae. Turpis tincidunt id aliquet risus feugiat. Morbi tincidunt ornare massa eget egestas purus viverra. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Auctor urna nunc id cursus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Urna neque viverra justo nec. Lectus quam id leo in. Sed arcu non odio euismod. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Molestie nunc non blandit massa enim. Quam adipiscing vitae proin sagittis nisl rhoncus. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
</p>

Answer 1

shape-outside can do this:
img#img-1 {
animation: top_to_bottom 3s ease-in-out infinite;
float: right;
margin: 10px;
shape-outside: inset(0px 0 0 0);
}
p {
text-align:justify;
}
#keyframes top_to_bottom {
50% {
transform: translateY(100px);
shape-outside: inset(100px 0 0 0);
margin-bottom:110px;
}
}
<img src="https://picsum.photos/200" alt="" id="img-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis elementum nibh tellus. Ullamcorper dignissim cras tincidunt lobortis. Elit eget gravida cum
sociis. Etiam sit amet nisl purus in mollis. Sapien et ligula ullamcorper malesuada proin libero. Massa tincidunt nunc pulvinar sapien et. Adipiscing enim eu turpis egestas pretium. Leo integer malesuada nunc vel risus commodo. Nunc consequat interdum
varius sit amet mattis vulputate enim. Vitae aliquet nec ullamcorper sit amet. Sem fringilla ut morbi tincidunt augue. Posuere morbi leo urna molestie at elementum eu facilisis sed. Sed arcu non odio euismod lacinia at quis risus. Ultrices eros in cursus
turpis massa tincidunt dui ut ornare. Tellus cras adipiscing enim eu turpis. Vitae ultricies leo integer malesuada. Est ultricies integer quis auctor. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Eu turpis egestas pretium
aenean pharetra magna ac. Non blandit massa enim nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Diam sollicitudin tempor id eu nisl nunc mi. Et netus et malesuada fames. Sed enim ut sem viverra aliquet eget. Vel quam elementum pulvinar etiam
non quam lacus. Et tortor at risus viverra adipiscing at in. Libero volutpat sed cras ornare arcu dui vivamus arcu. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Velit dignissim sodales ut eu sem integer vitae. Turpis tincidunt
id aliquet risus feugiat. Morbi tincidunt ornare massa eget egestas purus viverra. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Auctor urna nunc id cursus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper
dignissim. Urna neque viverra justo nec. Lectus quam id leo in. Sed arcu non odio euismod. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Molestie nunc non blandit massa enim. Quam adipiscing vitae proin sagittis nisl rhoncus. Facilisi
cras fermentum odio eu feugiat pretium nibh ipsum. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
</p>