Animacja css - potrzebna pomoc

Question

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>

 

Answer 1

codepen

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

Comments

Dzięki bardzo o to chodzilo;)

Wgl miałem inna ścieżkę myślenia ;)

---

w takim razie cieszę się, że pomogłam ;)
nie ma za co ;)

Answer 2

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; }
}