css, fade-in animacja

Question

Ktoś może pomóc z efektem takiego jak by domina?
 chodzi mi o taki efekt, że po kliknięciu przycisku powolutku pojawiają się kolejne elementy-każdy to oddzielny akapit.

Czyli pojawia się pierwszy element którego animacja trwa 2 sekundy, kolejny pojawia się po skończeniu pierwszego. Czyli delay 2s musi mieć itd, tyle, że nie bardzo coś wychodzi, bo zazwyczaj od razu pojawiają mi się wszystkie elementy a dopiero potem animacja startuje

Comments

A masz je ukryte przed rozpoczęciem animacji?

---

No właśnie mam.  Chodzi o to, że mam kipeską kolejność. Po kliknięciu przycisku wszystkie się pokazują i dopiero się załącza animacja a powinny się pokazywać w czasie trwania animacji. Kombinuje...

---

Próbowałeś animować opacity i visibility jednocześnie?

---

opaicity tak, z visibility nic nie kombinowałem jeszcze.

Jakiś przykład na jssfield?

---

Mam 20 klas dla 20  elementów, wszystkie w css mają nadaną jedną animację, ale każda klasa ma różny delay. każda kolejna jest spóźniona o 1sekundę. Tylko nie wiem jak to załączyć aby się zaczeły odpalać po kolei. Do tego aby na początku były ukryte a po kliknięciu odpaliła się animacja.

---

Ja się tym często bawię i powiem ci że dajesz opacity: 0; i w ostatniej klatce animacji dajesz: 1; albo w pierwszej klatce. a dla elementów, które mają się pojawiać daj animation-fill-mode: forwards;

---

https://jsfiddle.net/b3orot3f/

Sam css, bez js.

---

Mam tak, ale nie mogę tego do kupy poskładać.

.napis1
{
    font-size: 80px;
    display: inline-block;
    opacity: 0;
    animation: fadein 1s ease-in 1s forwards
}

.napis2
{
    font-size: 80px;
    display: inline-block;
    animation: fadein 1s ease-in 2s forwards
}

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

}

Wchodzę na stronę, wszystko jest ukryte. klikam button, mają po kolei pojawiać się literki.  Gdzie to mam ukryć? w jquery czy css?

 

Czort, twój przykład jest może ok po za tym, że tych elementów na stronie to ja mam 30, dla każdego rozumiem, że muszę stworzyć klasę opuźniającą?

---

Jeśli będziesz chciał to rozwiązać w ten sposób to tak

---

Ok, to nie jest problem. Tylko jak to ukryć na początku strony i odpalać przyciskiem czy czym tam chcę?  usuwać klasy na początku skryptu nie mogę, bo wtedy zniknie właściwość visibility i wszystko będzie widoczne? jakieś pomysły?

 ok show i hide pomogły ;) 

Dzieki za pomoc.