:root{--tempo-animacao:1s}@keyframes square-animation{0%,10.5%,100%{left:0;top:0}12.5%,23%{left:32px;top:0}25%,35.5%{left:64px;top:0}37.5%,48%{left:64px;top:32px}50%,60.5%{left:32px;top:32px}62.5%,73%{left:32px;top:64px}75%,85.5%{left:0;top:64px}87.5%,98%{left:0;top:32px}}.fade-in{animation:1s ease-in-out fadeIn}.fade-out{animation:1s ease-in-out fadeOut}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slideOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slideInRight{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes slideInTop{from{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInBottom{from{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}.animacao{opacity:0;transition:opacity var(--tempo-animacao) ease-out,transform var(--tempo-animacao) ease-out}.in-view-bottom,.in-view-left,.in-view-right,.in-view-top,.out-view-bottom,.out-view-left,.out-view-right,.out-view-top{animation-duration:var(--tempo-animacao);animation-fill-mode:forwards}.in-view-left{animation-name:slideInLeft}.out-view-left{animation-name:slideOutLeft}.in-view-right{animation-name:slideInRight}.out-view-right{animation-name:slideOutRight}.in-view-top{animation-name:slideInTop}.in-view-bottom{animation-name:slideInBottom}