11

垂直方向にスクロールする背景画像を持つボックスのリストがあります。

@keyframes movie {
   0% { background-position: 50% 5%; }
   50% { background-position: 50% 95%; }
   0% { background-position: 50% 5%; }
}

.movie {
    animation: movie 50s linear infinite;
}

「問題」は、このようにすべてのボックスの背景が同時に移動することです。
各ボックスのアニメーションが異なるように、「ランダムな開始点」が必要です。

たとえば、ある背景が下に移動し、別の背景が上に移動しているとします。

純粋なCSSで可能ですか？Javascriptでも簡単な方法が見つかりません..

4

4 に答える 4

8

使用できますanimation-delay。

animation-delay: 10s;

またはあなたの速記の中で：

animation: movie 50s linear 10s infinite;

いくつかの疑似クラスを使用すると、処理が簡単になる可能性があります。

.movie:nth-of-type(1) {
  animation-delay: 10s;
}

.movie:nth-of-type(2) {
  animation-delay: 20s;
}

.movie:nth-of-type(3) {
  animation-delay: 30s;
}
于 2013-10-09T10:37:46.190 に答える
3

これは、次の組み合わせを使用して、記述 (または SCSS などを介して生成) せずに、純粋な CSS で実行できます。

  • animation-delayアニメーションの開始時間を変更するネガ
  • ルールの適用を「ランダム化」する数式を適用するための複数nth-childまたはルールnth-of-type
movie.nth-child(2n) { animation-delay: -10s }  
movie.nth-child(2n+1) { animation-delay: -30s }  
movie.nth-child(3n) { animation-delay: -20s; }  
movie.nth-child(5n) { animation-delay: -40s }  
movie.nth-child(7n) { animation-delay: -15s }  
{etc}

最初の 2 つのルールだけを使用すると、交互のルールが得られます (例: テーブル内の偶数/奇数行)。+1オフセットを持つ 2 番目のルールに注目してください。これは、クラス ( movie) が変更するルールに対して適切なデフォルトを持っていない場合に重要です (デフォルトでは 0 ですanimation-delay)。

nth-child(n)の素数の倍数で数式を使用nすると、有効なパターンの長さがすべての素因数 (2*3*5*7 = 210繰り返し前の要素など) の積に等しくなります。

li {
  animation: movie 5s linear infinite;
}
@keyframes movie {
  20% { color: white }
  40% { color: black }
}
li:nth-child(2n-1) {
  background-color: lime;
  animation-delay: 1s;
}
li:nth-child(2n) {
  background-color: orange;
  animation-delay: 2s;
}
li:nth-child(3n) {
  background-color: yellow;
  animation-delay: 3s;
}
li:nth-child(5n) {
  background-color: magenta;
  animation-delay: 5s;
}
li:nth-child(7n) {
  background-color: aqua;
}
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>

さらにランダム化するために、わずかに異なるn倍数/オフセットを使用して 2 番目のルール セットを作成し、 animation-duration(または他のルールを実際に) 変更することができます。

于 2016-09-09T17:09:30.910 に答える