Animacja CSS-pozostają paski(?)

Question

Mam problem z animacją, mianowicie chodzi o to aby logo(które jednocześnie jest linkiem) przejeżdżało z lewej strony  okna na środek ale żeby na początku było niewidoczne.

2 problemy : 

1. logo jest widoczne od początku(mimo zostosowania display: none;)

2. logo podczas poruszania się zostawia widoczne ślady(paski) które po jakimś czasie znikają( widoczne na screenie)

 

<div class="c1">
<div id="fb"><a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>

</div>

 

div.c1 {
    width: 700px;
    height: 300px;
    background: white;
    margin: 50% auto;
    position: relative;
    border: 1px solid black;

}

#fb {
    left:0%;
    top: 0%;
    position: absolute;
    animation-name: fb;
    animation-delay: 1s;
    animation-duration: 2s;
    animation-fill-mode: forwards;

    
}
@keyframes fb{
    0% {display: none; top: 0%; left: 0%;}
    100% {display: inline-block;top: 0%; left: 50%;}
}

 

 

Jak sobie z tym poradzić? I czy ewentualne stworzenie czegoś takiego przy użyciu CSS jest możliwe?

Answer 1

1. logo jest widoczne od początku(mimo zostosowania display: none;)

2. logo podczas poruszania się zostawia widoczne ślady(paski) które po jakimś czasie znikają( widoczne na screenie

 Nie jestem pewien jak to wyglada w keyframes, ale w transition właściwość display nie jest animowana. Lepszym rozwiązaniem byłoby zastosowanie opacity 0 - 1.

Właściwie to w tym wypadku proponowałbym wykorzystanie właściwości transition.

Answer 2

Spróbuj zamiast zmiany z display none na display:inline-block użyć opacity 0 na 1.

Answer 3

Ok, problem rozwiązany, pomogło zostosowanie opacity 0-1 + dodanie do diva c1 właściwości opacity:0 , dzieki czemu paski zniknęły. Dzięki!