Estou tentando fazer uma animação com CSS que seria de um "sol" passando por uma imagem.
A ideia era ter algo próximo desse resultado:
Mas no meu código o "sol" fica pulando de um lado para o outro e não fica animado da forma correta. Como faço para animar com CSS esse readial-gradient
( ou linear-gradiente
) da forma correta?
Tentei usar o @keyframes
e mudar as propriedades
De: radial-gradient(circle at 100% 50%...
Para: radial-gradient(circle at 0% 50%...
Mas não deu certo como podem ver abaixo
.box {
width: 300px;
height: 150px;
background-image: radial-gradient(circle at 100% 50%, rgba(255, 155, 61, 0.473), transparent 25%), url(https://unsplash.it/300/150?image=986);
background-size: cover;
background-repeat: no-repeat;
animation: bg 3s linear infinite, none;
}
@keyframes bg {
to {
background-image: radial-gradient(circle at 0% 50%, rgba(255, 155, 61, 0.473), transparent 25%), url(https://unsplash.it/300/150?image=986);
}
}
<div class="box"></div>