Animacje w CSS

Question

Witam. Dzisiaj próbując dalej tworzyć swoją stronę napotkałem na błąd, który wczoraj nie  występował.

Mianowicie chodzi o to, że Animacja, która już wykona się w całości wraca do stanu początkowego.

Jeszcze wczoraj, po wykonaniu animacji animacja zostawała w stanie, w którym się skończyła, a dzisiaj jest problem.

#section
{
    background-image: url(img/2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
    opacity: 0;
    animation-name: pojawienie;
    animation-duration: 5s;
    animation-delay: 1s;
    
    -webkit-animation-name: pojawienie;
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 1s;
}

@keyframes pojawienie
{
    0 { opacity: 0; }
    100% { opacity: 1; }
}

Po wykonaniu animacji opacity znów ustawione jest na 0, dlaczego?

Answer 1

Witaj!

Prawdopodobnie musisz po prostu dodać 2 właściwości w #section 

animation-iteration-count: 1; /*ilosc powtorzen. cyferka oznacza wartość powtorzen.*/
animation-fill-mode: forwards; /*poczytaj ogolnie o tej wlasciwosci. Oznacza ona 
ogolnie jak bedzie wygladal element po zakonczeniu animacji. forwards oznacza ze element
będzie wygladal jak w ostatniej sekcji czasu animacji czyli w Twoim przypadku opacity: 100%;*/

 

Comments

Dzięki, pomogło, tylko dlaczego jednego dnia działało poprawnie bez tego a drugiego już nie?

---

Nie ma za co. Dla mnie to też jest niewiadoma :) Miałem tą samą sytuację jak Ty, raz się powtarzały animacje, a raz nie. Być może wynika to z tego, że @keyframes jest nową właściwością wprowadzoną dopiero w CSS3 i przeglądarki nie do końca ją jeszcze "ogarniają" :P Tak mi się wydaje, ale szczerze to nie wiem tego do końca.

Pozdrawiam!