Animation to move image inside a span

Question

Animation to move image inside a span

Asked 5 years, 4 months ago

Viewed 319 times

2

I have a div with the id="origem" which contains an image of a star, how can I move the image to the span with the id="destino" using an animation of for example 2 seconds, the path has to be in a straight line or can make a curve? It can also be in a loop as in the image?

img {
    width: 2rem;
    height: 2rem;
}

<body>

    <div>fazer imagem ficar na direita desta frase: 
        <span id="destino"> 
                
        </span>
    </div>

    <br><br><br><br><br><br><br>
    
    <div id="origem">------------------------------------------------------------------------
        <img src="https://image.flaticon.com/icons/svg/148/148841.svg" alt="">
    </div>

</body>

Strongly related: How to make SVG or CSS animation of a Text walking the way?

– Woss

2019/05/21 at 12:15
1

Vik stackoverflow snippet only accepts image if url is https ;)

– hugocsl

2019/05/21 at 14:54

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-05-21T12:32:25+00:00

Guy with the link quoted by Anderson you get something much more sophisticated, but only with CSS and some tricks you get something similar, without SVG, and even so, "bending" the line of animation.

The detail is that while the animation happens you will decrease the width container at the same time it changes the background position of bottom for top, and with that you will create a curve.

The idea is to use a pseudo-element in the container, and not two elements "totally" separated as was your idea. This will greatly facilitate the idea of animation which is now a simple @keyframes

Follow the code of the animation

.origem::after {
	content: "";
	position: absolute;
	display: inline-block;
	height: 200px;
	width: 200px;
	background-image: url(https://image.flaticon.com/icons/svg/148/148841.svg);
	background-size: 20px 20px;
	background-position: bottom right;
	background-repeat: no-repeat;

	animation: star 2s linear infinite;
}

@keyframes star {
	75%, 100% {
		height: 20px;
		width: 20px;
		background-position: top right;
	}
}

<div class="origem">
	Lorem ipsum dolor sit amet.
</div>
<div class="origem">
	Lorem ipsum dolor sit amet. Lorem, ipsum dolor.
</div>