A animação não aparece como deveria

Apesar de eu fazer exatamente igual como está no exercício, o navegador executa o código mas não executa a animação no banner do twitter, ele apenas aparece após o tempo de delay somado ao tempo de animação como se tivesse tivesse oculto e instantaneamente aumentasse sua opacidade de 0 para 1.

Após fazer alguns teste, consegui com que ocorra igual como sugerido na atividade, porém usei o seguinte código:

.banner-twitter {
    transition-delay: 2s;
    animation: aparece2 2.5s;
    animation-fill-mode: backwards;
}

@keyframes aparece2 {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0;
        transform: scale(0.001);
    }
}

No caso, percebi que o navegador trabalha como se executasse o

animation: aparece .5s;

a partir do momento que carrega, ou seja, termina após 0,5 segundos após o carregamento, porém, o

transition-delay: 2s;

trabalha como se fizesse a exibição do objeto apenas após 2 segundos do carregamento da página, ou seja, após o tempo da animação já ocorrer. Por consequência, como no projeto dizia para aparecer após dois segundos de delay, coloquei a animação para 2,5 segundos, e como dois segundos são 80% de 2,5 segundos, o keyframe aparece2 está como coloquei.

Minha dúvida é, o que poderia ser isso? Eu fiz algo diferente? Porque mesmo visualizando no firefox e no chrome, colocando o -moz- e o -webkit- ainda ficava do mesmo assim, por isso fiz essa modificação.

Agradeço desde já.