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

Animacja pojawiania się i znikania

VPS Starter Arubacloud
0 głosów
1,201 wizyt
pytanie zadane 19 marca 2019 w HTML i CSS przez extr4v3rT Początkujący (440 p.)

Witam, próbuje zrobić animacje aby napisy się pojawiały i znikały, chce aby dana sekwencja robiła się w nieskończoność, ale jeżeli dam 'infinite' to powtarzają się w nieskończoność ale wszystkie na sobie nałożone.

#home > .contenthome > p {
    position: absolute;
    padding: 100px 0;
    text-align: center;
    bottom: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 1;
    color: white;
    font-size: 100px;
    font-weight: bold;
    letter-spacing: 10px;
    animation: przymiotniki  6s;
    opacity: 0;
}
#home > .contenthome > p:nth-child(2) {
    animation-delay: 6s;
}
#home > .contenthome > p:nth-child(3) {
    animation-delay: 12s;
}
#home > .contenthome > p:nth-child(4) {
    animation-delay: 18s;
}

@keyframes przymiotniki {
    30%, 90% {opacity:1;}
  }
 <div id="home">
        <div class="contenthome">
            <p>KREA<font color="red">TY</font>WNY</p>
            <p>EMPA<font color="red">TY</font>CZNY</p>
            <p>OTWAR<font color="red">TY</font></p>
            <p>KOMUNIKA<font color="red">TY</font>WNY</p>

        </div>
    </div>

 

komentarz 20 marca 2019 przez pablop76 VIP (123,060 p.)
Napisz w punktach jak ma wyglądać efekt, który chcesz osiągnąć.
komentarz 20 marca 2019 przez extr4v3rT Początkujący (440 p.)

1. Zrobiłem animacje, która wyświetla napis, zanika i pojawia się drugi napis. Animacja wygląda dobrze i działa tak jak powinna, ale kiedy wyświetli się ostatni napis "kumunikatywny" to wtedy już nic więcej się nie wyświetli, bo to koniec animacji, kiedy dam animacji atrybut "infinite" to wtedy zamiast wyświetlać się napis po napisie to będą wszystkie razem naraz pojawiać się i znikać. Myślałem na użyciem funckcji, która po "x" czasie zresetuje animacje, tylko że nie wiem jak, próbowałem tego:  (".napis" to po zmianie klasa tych napisów) Nic się nie dzieję, także myślę, iż źle napisałem tę funkcję.

    <script type="text/javascript">
        var timeout = setInterval(reloadChat(), 5000);    
        function reloadChat() {
        
             $('.napis').load('index.html');
        }
        </script>

 

komentarz 20 marca 2019 przez extr4v3rT Początkujący (440 p.)
Zamierzony efekt to wyświetlanie się i znikanie w danej sekwencji napis po napisie przez cały czas.

1 odpowiedź

+1 głos
odpowiedź 20 marca 2019 przez pablop76 VIP (123,060 p.)
wybrane 20 marca 2019 przez extr4v3rT
 
Najlepsza
komentarz 20 marca 2019 przez extr4v3rT Początkujący (440 p.)
uff dziękuję bardzo <3 :DDDD

Podobne pytania

0 głosów
2 odpowiedzi 611 wizyt
pytanie zadane 29 maja 2017 w HTML i CSS przez hiper007 Stary wyjadacz (11,270 p.)
0 głosów
1 odpowiedź 643 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...