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

Animacja css - potrzebna pomoc

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
286 wizyt
pytanie zadane 2 lipca 2017 w Rozwój zawodowy, nauka, praca przez jjanek Użytkownik (630 p.)
edycja 2 lipca 2017 przez jjanek

Hej, 
mam 4 kontenerki - próbuję zrobić tak, żeby wszystkie były ukryte pojawiał się jeden zanikał i pojawiał się drugi zanikał, pojawiał się trzeci zanikał itd. 

Udało mi się to zrobić póki co dla jednego kontenera - może ktoś miał by jakieś sugestie? 

tutaj podaje css:
 

.wrapper {
    position: relative;
}

.wrapper > div {
    position: absolute;
    font-size : 2rem;
}

.wrapper:hover 
{
    display: block;
    -webkit-animation: 6s 1 zanikanie; animation: 6s 1 zanikanie; opacity: 0;
    animation-iteration-count: infinite;
    
}
.wrapper  > div
{
    display: block;
    -webkit-animation: 6s 1 zanikanie; animation: 6s 1 zanikanie; opacity: 0;
    animation-iteration-count: infinite;
}


.wrapper  > div:nth-child(1) {
    animation-delay:600ms;
    -webkit-animation-delay:600ms;
}
.wrapper  > div:nth-child(2) {
    animation-delay:1200ms;
    -webkit-animation-delay:1200ms;
}
.wrapper  > div:nth-child(3) {
    animation-delay:1800ms;
    -webkit-animation-delay:1800ms;
}


@keyframes pojawianie {
    0% {opacity: 1; filter: alpha(opacity=100);}
}

@keyframes zanikanie {
    0% {opacity: 1; filter: alpha(opacity=100);}
    70% {opacity: 1; filter: alpha(opacity=100);}
    100% {opacity: 0; filter: alpha(opacity=0);}
}

@-webkit-keyframes zanikanie {
    0% {opacity: 1; filter: alpha(opacity=100);}
    70% {opacity: 1; filter: alpha(opacity=100);}
    100% {opacity: 0; filter: alpha(opacity=0);}
}


tutaj podaje html

<div class='wrapper'>
  <div > jakis tekst 1 </div>
  <div> jakis tekst 2 </div>
  <div> jakis tekst 3 </div>
  <div class='child'> jakis tekst 4 </div>
<div>

 

2 odpowiedzi

+1 głos
odpowiedź 2 lipca 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 2 lipca 2017 przez jjanek
 
Najlepsza

codepen

Kwestia zabawy czasem ;)
W ogóle o coś takiego chodziło?

1
komentarz 2 lipca 2017 przez jjanek Użytkownik (630 p.)
Dzięki bardzo o to chodzilo;)

Wgl miałem inna ścieżkę myślenia ;)
komentarz 2 lipca 2017 przez imklau Nałogowiec (42,090 p.)
w takim razie cieszę się, że pomogłam ;)
nie ma za co ;)
0 głosów
odpowiedź 2 lipca 2017 przez pablop76 VIP (123,460 p.)

Witam. Może coś takiego

<div class='wrapper'>
    <div class="first"> jakis tekst 1 </div>
    <div> jakis tekst 2 </div>
    <div> jakis tekst 3 </div>
    <div> jakis tekst 4 </div>
<div>
body{
  background-color: black;
}
.wrapper{
  display: block;
  margin: 0 auto;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  background-color: #34A853;
  padding: .5% 0;
}
.wrapper > div{
  width: 200px;
  display: inline-block;
  color: white;
  font-size: 1.2em;
}
.first{
  margin-left: 200px;
  animation: animate 10s infinite linear;
  -webkit-animation: animate 10s infinite linear;
}

@keyframes animate{
  25% { margin-left: 0px; }
  50% { margin-left: -250px; }
  75% { margin-left: -500px; }
  100% { margin-left: -800px; }
}

 

Podobne pytania

0 głosów
1 odpowiedź 195 wizyt
pytanie zadane 5 listopada 2017 w HTML i CSS przez 123skiper Bywalec (2,170 p.)
0 głosów
1 odpowiedź 246 wizyt
+1 głos
0 odpowiedzi 180 wizyt
pytanie zadane 13 kwietnia 2017 w HTML i CSS przez ChrisG Nowicjusz (130 p.)

93,109 zapytań

142,087 odpowiedzi

321,610 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!

...