4

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:

inserir a descrição da imagem aqui

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>

2 Respostas 2

3

Com o @keyframe você consegue dizer para animação, quando executar tal ação utilizando valores percentuais. Que seria as fases da animação e esse valores é você que define.

Seguindo mais ou menos o que você precisa:

    
.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 {
    0%{
       background-image: radial-gradient(circle at 0% 50%, rgba(255, 155, 61, 0.473), transparent 25%), url(https://unsplash.it/300/150?image=986);
    }
    15%{
       background-image: radial-gradient(circle at 30% 50%, rgba(255, 155, 61, 0.473), transparent 25%), url(https://unsplash.it/300/150?image=986);
    }
    30%{
       background-image: radial-gradient(circle at 30% 50%, rgba(255, 155, 61, 0.473), transparent 25%), url(https://unsplash.it/300/150?image=986);
    }
    50%{
       background-image: radial-gradient(circle at 50% 60%, rgba(255, 155, 61, 0.473), transparent 25%), url(https://unsplash.it/300/150?image=986);
    }
    75%{
       background-image: radial-gradient(circle at 75% 60%, rgba(255, 155, 61, 0.473), transparent 25%), url(https://unsplash.it/300/150?image=986);
    }
    90%{
       background-image: radial-gradient(circle at 90% 50%, rgba(255, 155, 61, 0.473), transparent 25%), url(https://unsplash.it/300/150?image=986);
    }
}
<div class="box"></div>

Como eu havia comentado, consegui encontrar exemplos parecidos com o abaixo, trabalhando o fundo e o gradiente separadamente:

.box {
    width: 300px;
    height: 150px;
    background-image: url(https://unsplash.it/300/150?image=986);
    position: relative;
}

.sol{
    width: 100%;
    height: 100px;
    background-image: radial-gradient(circle, rgba(255, 155, 61, 0.473), transparent 25%);
    background-position: 110px 0px;
    position: absolute;
    background-repeat: none;
    -webkit-animation: sol 5s ease infinite; 
}

@-webkit-keyframes sol {
  from{
    background-position: 110px 0px;
  }
  to{
    background-position: -110px 0px;
  }
}
<div class="box"><div class="sol"></div></div>

3
  • Ara é até interessante, mas ai eu precisaria de quase 99 passos para deixa a animação fluida.... Eu sei que vc poderia refinar mais etc, eu até entendi o conceito que vc aplicou, mas para não parecer que ficaram "faltando frames" eu deveria ter algo como 1%, 3%, 5%, 7% até 100% acredito que deve ter um jeito mais otimizado pra tratar isso... Mas agradeço a contribuição!
    – hugocsl
    Commented 11/12/2018 às 16:28
  • Eu dei uma pesquisada aqui e não encontrei nada que fizesse funcionar ou o porque não funciona utilizando from e to do keyframes. Encontrei exemplos parecidos que tratavam o circulo e a imagem como elementos separados! Utilizando o position: relative / absolute, alterando o background-size. Commented 11/12/2018 às 17:45
  • Então, eu acredito que o bg-size junto com o bg-position seja o caminho! Não deve precisar separar não, apesar de que se usar um pseudo elemento no container deve deixar mais fácil mesmo, apesar de não ser a opção que eu desejava...
    – hugocsl
    Commented 11/12/2018 às 17:48
3

Cheguei em uma solução usando background-size e background-position.

A ideia é que vc tenha um background que seja maior que 100% do tamanho do container. Para isso basta vc colocar valores como background-size:200% ou 300%, Depois disso como o background-position vc coloca o bg para um lado ou para o outro.

inserir a descrição da imagem aqui

Veja o código para entender melhor:

.box {
  width: 300px;
  height: 150px;
  background-image: radial-gradient(circle, rgba(255, 166, 0, 0.7), transparent 25%), url(https://unsplash.it/300/150?image=986);
  background-size: 200% 100%, cover;
  background-position: 100% 50%, center;
  background-repeat: no-repeat;
  animation: bg 3s linear infinite, none;
}
@keyframes bg {
  to {
    background-position: 0% 50%;
  }
}
<div class="box"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .