Resultado inesperado no exercício do banner

Olá pessoal! Tudo beleza?

Então, mesmo depois de eu implementar o animation-fill-mode: backwards ou both ocorre um efeito esquisito no meu banner. Ele aparece com delay mas primeiro aparece no meu da tela e depois se move e anima conforme o código. Vocês sabem me explicar o por que desse efeito? Já procurei erro no código mas não encontrei. Segue meu código.

HTML

<header class="titulo-principal">
        <img class="foto-home" src="img/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>
        <ul class="palavra-home-3d">
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home boas-praticas">Boas práticas</li>
            <li class="palavra-home codigo-limpo">Código limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home design">Design</li>        
        </ul>
        <ul class="banner-twitter">
            <li><a href="https://twitter.com/joaodasilva">Siga-me no Twitter</a></li>
        </ul>
    </header>

CSS

.banner-twitter a {
    background-color: #3C1D3D;
    border: .25rem solid #000;
    width: 14em;
    padding: 1rem 0;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 1.2em;
    position: absolute;
    top: 0;
    right: 0;
    color: #FFF;
    -webkit-transform-origin: 0 0;
    transform-origin:  0 0;
    -webkit-transform: translate(calc(.707 * (3.5em - 100%) + 100%), calc(-.707 * 3.5em)) rotate(45deg);
    transform: translate(calc(.707 * (3.5em - 100%) + 100%), calc(-.707 * 3.5em)) rotate(45deg);
}

.banner-twitter {
    animation: banner 0.5s;
    -webkit-animation: banner .5s;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    animation-fill-mode: backwards;
}

@keyframes banner {
    0% {
        opacity: 0;
        transform: scale(.001);
    }
}

@-webkit-keyframes banner {
    0% {
        opacity: 0;
        transform: scale(.001);
    }
}

Se puderem me ajudar eu agradeço. Abraços!