paginas/style/animacoes.css

/*
código dev: Julio Lira
  -- https://github.com/Jul10l1r4
  -- Email: jul10l1r4@gmail.com
  -- https://twitter.com/jul10l1r4
      ===================================================
#   O tempo dado a essa animação é baseada na sequencia numérica  #
# de fibonacci, o tempo pode ser alterado, e enumerado por letras #
# licença de código? apenas use, não venda.. use!                 #
      ===================================================
                    Defina o tempo usando essas:
:root{
	--tempo-a: 0.2s;	
	--tempo-b: 0.3s;
	--tempo-c: 0.5s;
	--tempo-d: 0.8s;
	--tempo-d: 1.3s;
}
copie e cole onde pretende usa-la :p
você pode usar conforme esse exemplo

body{
  animation-name:opac;
  animation-duration:var( --tempo-a );
}
   . . . 
E assim por diante nos demais filhos.

*/
@keyframes opac{
  from{
    opacity:0.2;
  }
  to{
    opacity:1;
  }
}
@keyframes poush{
	0%{	
		position:absolute;
		left:-100%
	}100%{
		left:0%;
	}
}
@keyframes poinsh{
	0%{	
		position:fixed;
		left:0%;
		top:0;
		bottom:0;
	}100%{
		position:fixed;
		left:-100%;
		top:0;
		bottom:0;
	}
}