Nie jestem pewien, że to, co prosię o może być wykonane w ogóle. Jeśli to nie może być odpowiedź.

Edytuj: Poniższy przykład to betonowa obudowa. Jednak moje pytanie jest przede wszystkim jak zrobić wszystko w krokach, w przeciwieństwie do stopniowo.

Jak mogę używać CSS bez JavaScript, aby przewinąć div w krokach? To, co mam, to Div, który jest 3 razy szeroki jak jego kontener Div, i chcę, aby pojemnik przewijał wewnętrzny div co kilka sekund. Najpierw pokazać pierwszą trzecią, a następnie drugi, trzeci, a następnie wróć do pierwszego. I tak dalej.

<div style="width:100%; height:100px;  overflow-y:hidden; overflow-x:auto; ">
    <div style="width:300%; height:100px;">abc</div>
</div>

Patrzyłem na animation, ale wydaje się być dla stopniowego ruchu. Czy istnieje sposób, aby "skakać", jak przedstawiłem powyżej?

1
ispiro 3 czerwiec 2018, 22:36

3 odpowiedzi

Najlepsza odpowiedź

Nie jestem pewien, czy to może pomóc, ale możesz zrobić procenty w kluczowych ramach, aby uzyskać coś takiego, co można zastosować do galerii na przykład. Więc Timer ma 9s podzielony przez 3.

.box {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 9s infinite;
    animation: mymove 9s infinite;
}

@-webkit-keyframes mymove {
    0% {left: 0px;}
    20%{left: 0px;}
    40% {left: 100px;}
    60%{left:100px;}
    80%{left:200px;}
    100% {left: 200px;}
}

@keyframes mymove {
    0% {left: 0px;}
    20%{left: 0px;}
    40% {left: 100px;}
    60%{left:100px;}
    80%{left:200px;}
    100% {left: 200px;}
}
<div class="box"></div>
3
Flink 3 czerwiec 2018, 21:18

Tutaj ustawia wiele tła do div na naśladując więcej treści.

Ponieważ poprzednia odpowiedź pokazała, jeśli wybrany wynik końcowy jest dla DIV przewiń do drugiej połowy poczekaj trochę, a następnie przejdź do następnej itp., Dodanie większej liczby punktów przerwania do animacji powinno to zrobić. Należy pamiętać, że animacja jest jedynie efektem wizualnym.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

.parent {
    
    width: 90%;
    margin:0 auto;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.kid>* {
    flex: 1;
    border: 1px solid;
}

.kid {
    display: flex;
    position: absolute;
    background: linear-gradient(to right, red, red), linear-gradient(to right, orange, orange), linear-gradient(to right, yellow, yellow);
    background-position: 0% 0, 50% 0, 100% 0;
    background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 100%;
    background-repeat: no-repeat;
    width: 300%;
    height: 100px;
    animation: mymove 5s infinite;
}

@keyframes mymove {
    0% {
        left: 0%;
    }

    30% {
        left: 0%;
    }

    40% {
        left: -100%;
    }

    60% {
        left: -100%;
    }

    70% {
        left: -200%;
    }
    
    80% {
        left: -200%;
    }

    100% {
        left: 0%;
    }
}
<div class="parent">
  <div class="kid">
    <p>I'm a P Tag</p>
    <div>I'm a div Tag</div>
    <h1>I'm a h1 Tag</h1>
  </div>
</div>
2
Zohir Salak 3 czerwiec 2018, 22:18

Aby mieć animację daje wygląd wstrzymania w określonych czasach, zachowaj atrybuty, o których dokładnie się ożywiasz między procentami klatek kluczowych:

0% {
  color: green;
}
10% {
  color: red;
}
90% {
  color: red;
}
100% {
  color: blue;
}

Powyższe klatki kluczowe będą animować z zieleni na czerwony przy 10% ukończeniu, ale następnie pozostać na czerwono do 90%, dając wygląd, że animacja kończy się w krokach. Możemy zrobić coś podobnego z przesuwnym div:

.container {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.inner {
  display: flex;
  width: 300%;
  height: 100px;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 9s ease infinite;
}

@keyframes slide {
  0% {
    left: 0;
  }
  25.333% {
    left: 0;
  }
  33.333% {
    left: -100%;
  }
  58.666% {
    left: -100%;
  }
  66.666% {
    left: -200%;
  }
  92% {
    left: -200%;
  }
  100% {
    left: 0;
  }
}

.inner div {
  width: 33.333%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}
<div class="container">
  <div class="inner">
    <div class="red">
      A
    </div>
    <div class="blue">
      B
    </div>
    <div class="green">
      C
    </div>
  </div>
</div>

Jeśli procentami klatek kluczowych wyglądają dziwnie, dlatego, że podziemiłem "kroki" w równe części czasu, które są trzecie.

1
SpyderScript 3 czerwiec 2018, 21:46