Surgir do fundo

[Mateus Silva 64]

to com uma dúvida, tentei de várias forma e nada deu certo :\

o que eu quero é que tal objeto (um loader) surja "em escala" do fundo, no caso ele tem um fade e cresce ao mesmo tempo, algo tipo:

 

 

alguém consegue me ajudar ?

[Rafael Sirotheau 43]

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1);
    transform: scale3d(.1, .1, .1);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1);
    transform: scale3d(.1, .1, .1);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

Adiciona a class .zoomIn ao elemento.

Altere o animation-duration para ajustar a velocidade da animação.

 

Utilize css para posicionar o elemento ao centro.

[Mateus Silva 64]

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1);
    transform: scale3d(.1, .1, .1);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1);
    transform: scale3d(.1, .1, .1);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

Adiciona a class .zoomIn ao elemento.

Altere o animation-duration para ajustar a velocidade da animação.

 

Utilize css para posicionar o elemento ao centro.

 

muuuuuito obrigado cara, de verdade!