• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animacje w CSS

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
837 wizyt
pytanie zadane 5 czerwca 2016 w HTML i CSS przez Sarvite Obywatel (1,210 p.)
edycja 5 czerwca 2016 przez Sarvite

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?

1 odpowiedź

0 głosów
odpowiedź 5 czerwca 2016 przez Barus Stary wyjadacz (14,120 p.)
wybrane 5 czerwca 2016 przez Sarvite
 
Najlepsza

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%;*/

 

komentarz 5 czerwca 2016 przez Sarvite Obywatel (1,210 p.)
Dzięki, pomogło, tylko dlaczego jednego dnia działało poprawnie bez tego a drugiego już nie?
komentarz 5 czerwca 2016 przez Barus Stary wyjadacz (14,120 p.)
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!

Podobne pytania

0 głosów
1 odpowiedź 512 wizyt
pytanie zadane 17 listopada 2016 w HTML i CSS przez Sedki Początkujący (250 p.)
0 głosów
1 odpowiedź 232 wizyt
pytanie zadane 17 grudnia 2016 w JavaScript przez Konrad Fx Mądrala (6,910 p.)
0 głosów
1 odpowiedź 784 wizyt
pytanie zadane 27 września 2017 w HTML i CSS przez StanD Użytkownik (930 p.)

93,109 zapytań

142,088 odpowiedzi

321,611 komentarzy

62,450 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...