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

@keyframes nie dziala?

VPS Starter Arubacloud
0 głosów
395 wizyt
pytanie zadane 19 czerwca 2018 w HTML i CSS przez Adamek185wp Obywatel (1,280 p.)
edycja 19 czerwca 2018 przez Adamek185wp

Witam, mam problem, chcialbym osiagnac text ktory po 26 sekundach sie zmienia lecz caly czas mam przykljone wszystkie listy ul li w jedno, nie umiem tego wytlumaczyc ale jak ktos odpali kod to chyba bedzie wiedzial o co mi chodzi :P

 

HTML:
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>90...Old</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div class="content">
    
    <ul>
        <li><!------1---->
            <p>
            When I was six years old I broke my leg
            I was running from my brother and his friends
            And tasted the sweet perfume of the mountain grass I rolled down
            I was younger then,
            take me back to when I
            </p>
        </li>
        <li><!------2---->
            <p>
            Found my heart and broke it here
            Made friends and lost them through the years
            And I've not seen the roaring fields in so long, I know I've grown
            But I can't wait to go home
            </p>
        </li>
        <li><!------3---->
            <p>
            I'm on my way
            Driving at ninety down those country lanes
            Singing to Tiny Dancer
            And I miss the way you make me feel, and it's real
            We watched the sunset over the castle on the hill
            </p>
        </li>
        <li><!------4---->
            <p>
            Fifteen years old and smoking hand-rolled cigarettes
            Running from the law through the backfields and getting drunk with my friends
            Had my first kiss on a Friday night, I don't reckon that I did it right
            But I was younger then, take me back to when
            </p>
        </li>
        <li><!------5---->
            <p>
            We found weekend jobs, when we got paid
            We'd buy cheap spirits and drink them straight
            Me and my friends have not thrown up in so long, oh how we've grown
            But I can't wait to go home
            </p>
        </li>
        <li><!------6---->
            <p>
            I'm on my way
            Driving at ninety down those country lanes
            Singing to Tiny Dancer
            And I miss the way you make me feel, and it's real
            We watched the sunset over the castle on the hill
            </p>
        </li>
        <li><!------7---->
            <p>
            Over the castle on the hill
            Over the castle on the hill
            </p>
        </li>
        <li><!------8---->
            <p>
            One friend left to sell clothes
            One works down by the coast
            One had two kids but lives alone
            One's brother overdosed
            One's already on his second wife
            One's just barely getting by
            But these people raised me and I can't wait to go home
            </p>
        </li>
        <li><!------9---->
            <p>
            And I'm on my way, I still remember
            This old country lanes
            When we did not know the answers
            And I miss the way you make me feel, it's real
            We watched the sunset over the castle on the hill
            Over the castle on the hill
            Over the castle on the hill
            </p>
        </li>
    </ul>

</div>

    <header>
        
    </header>

    <nav>
        
    </nav>

    <main>

        <div class="box_wideo">
            <video autoplay loop class="wideo">
                <source src="mp4/Ed Sheeran - Castle On The Hill [Official Lyric Video] (youtubemp4.to).mp4" type="video/mp4">
            </video>
        </div>

    </main>

    <footer>
        2018&copy; Wszelkie prawa zastrzeżone
    </footer>

</body>
</html>



 

CSS:
 


*, *:before, *:after
{
    box-sizing: border-box;
}

body
{
    margin: 0px;
    background: black;
}

.content
{
    z-index: 1;
    display: flex;
    position: fixed;
    top: 260px;

    width: 100%;
    height: 240px;
    background: rgba(0,77,255,0.1);
    color: white;
    text-shadow: -1px -1px 2px white;

    animation: text 26s ease-in-out infinite ;
}

@keyframes text
{
    0%
    {
        opacity: 0;
    }
    10%
    {
        opacity: 1;
    }
    90%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }

}

p
{
    font-size: 24px;
}

ul li
{
    list-style: none;
}

ul li:nth-child(1)
{
    animation-delay: 26s;
    position: fixed;
    top: 260px;
}
ul li:nth-child(2)
{
    animation-delay: 52s;
    position: fixed;
    top: 260px;
}

ul li:nth-child(3)
{
    animation-delay: 78s;
    position: fixed;
    top: 260px;
}

ul li:nth-child(4)
{
    animation-delay: 104s;
    position: fixed;
    top: 260px;
}

ul li:nth-child(5)
{
    animation-delay: 130s;
    position: fixed;
    top: 260px;
}
ul li:nth-child(6)
{
    animation-delay: 156s;
    position: fixed;
    top: 260px;
}
ul li:nth-child(7)
{
    animation-delay: 182s;
    position: fixed;
    top: 260px;
}

ul li:nth-child(8)
{
    animation-delay: 208s;
    position: fixed;
    top: 260px;
}
ul li:nth-child(9)
{
    animation-delay: 234s;
    position: fixed;
    top: 260px;
}

header
{
    background: url(img/head.jpg);
    width: 100%;
    height: 100px;
}

nav
{
    margin: 0px 0px 50px;
    background: rgba(20,219,230,1);
    width: 100%;
    height: 104px;
    border: 2px solid lightblue;
}

main
{
    min-height: 900px;
}

.wideo
{
    margin: 20% 5% 15%;
    width: 90%;
    opacity: 0.8;
    /* box-shadow: 0px 0px 40px 20px rgba(20,219,230,0.9); */
}

footer
{
    width: 100%;
    height: 34px;
    background: rgba(20,219,230,1);
    margin: 50px 0px 110px;
    border: 2px solid rgba(10,170,200,0.8);

    font-size: 140%;
    padding: 1px;
    text-align: center;
}

 

2 odpowiedzi

+1 głos
odpowiedź 19 czerwca 2018 przez pablop76 VIP (123,060 p.)
wybrane 19 czerwca 2018 przez Adamek185wp
 
Najlepsza
Ustawiłeś position:fixed; oraz top:260px; dla wszystkich li więc wszystkie itemy listy nałożyły się na siebie. Normalne.
komentarz 19 czerwca 2018 przez Adamek185wp Obywatel (1,280 p.)
Znaczy chodzi mi o to zeby byl w jednym miejscu ale co 26 jedno zanikalo a drogie sie pojawialo :) ,nie wiem czy position fixed w tym przeszkadza? Szczerze. Zalezy mi zeby 1 li sie pojawilo a po 26 sec zniklo i pojawilo sie 2 li itd
komentarz 19 czerwca 2018 przez pablop76 VIP (123,060 p.)
To je ukryj wszystkie oprócz pierwszego na starcie. Pierwszemu ustaw znikanie.
komentarz 19 czerwca 2018 przez Adamek185wp Obywatel (1,280 p.)
Moglbys przerobic ten kod ? Bo zrobilem to teraz ale i tak nie dziala... moze cos zle wstawilem :/ byl bym wdzieczny :)
komentarz 19 czerwca 2018 przez pablop76 VIP (123,060 p.)
Ustawiając animacje dla content liczysz na to, że itemy ją odziedziczą?
komentarz 19 czerwca 2018 przez Adamek185wp Obywatel (1,280 p.)
Aaaaa ok rozumiem... dzieki :D raczej juz teraz pujdzie jak poprawie
0 głosów
odpowiedź 19 czerwca 2018 przez Igor Gawrys Stary wyjadacz (12,460 p.)
Nie animation tylko animation-name.
komentarz 19 czerwca 2018 przez Adamek185wp Obywatel (1,280 p.)
nic mi to nie zmienilo a wrecz przeciwnie :)
komentarz 19 czerwca 2018 przez Perseusz Bywalec (2,190 p.)

nic mi to nie zmienilo a wrecz przeciwnie :)

pozostało takie same

Podobne pytania

0 głosów
2 odpowiedzi 257 wizyt
pytanie zadane 9 kwietnia 2020 w HTML i CSS przez Timonn Nowicjusz (180 p.)
0 głosów
1 odpowiedź 152 wizyt
pytanie zadane 23 maja 2019 w HTML i CSS przez tgv Użytkownik (890 p.)
0 głosów
1 odpowiedź 140 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...