Что означает значение «достаточно» и «слишком много» в свойстве animation-name? - PullRequest
Новая
       5

Что означает значение «достаточно» и «слишком много» в свойстве animation-name?

0 голосов
/ 17 января 2019

Я читаю книгу о CSS-анимации. Я нашел это предложение:

Каждое указанное имя-анимации должно иметь соответствующее значение для любого другие анимации- * свойства. Если в анимации слишком много значений - * свойство, любые оставшиеся значения игнорируются. Если нет достаточно значений, список значений будет повторяться до тех пор, пока достаточно, чтобы соответствовать.

Я не могу понять, что это за история слишком многих или недостаточно соответствующих ценностей, может быть, у кого-то есть идея? любой намек был бы великолепен.

1 Ответ

0 голосов
/ 17 января 2019

Вот базовый пример: 

.too-many {
  animation-name: one, two;
  animation-delay: 0s, 1s, 2s, 3s, 4s;
  /* the 2s, 3s and 4s will get ingored because they cannot be matched with any animation*/
}

.not-enough {
  animation-name: one, two, three, four, five, six, seven;
  animation-delay: 0s, 1s;
  /*it's like having
   animation-delay: 0s, 1s, 0s, 1s, 0s, 1s, 0s;
   we repeat until we cover all the animations
  */
}

То есть, если у нас меньше значений, чем animation-name, мы повторяем, пока не получим одинаковое число. Если у нас есть больше, мы не рассматриваем переполнение

Та же логика применяется к любым свойствам, которые могут принимать несколько значений, например, transition и background. 

body {
  margin: 0;
  height: 100vh;
  background-image: 
     linear-gradient(red, red), 
     linear-gradient(blue, blue), 
     linear-gradient(red, red), 
     linear-gradient(blue, blue);
  background-size: 20px 20px, 50px 50px;
  background-repeat: no-repeat;
  background-position: top, bottom, left, right;
}

Выше указано то же самое: 

body {
  margin: 0;
  height: 100vh;
  background-image: 
     linear-gradient(red, red), 
     linear-gradient(blue, blue), 
     linear-gradient(red, red), 
     linear-gradient(blue, blue);
  background-size: 20px 20px, 50px 50px,20px 20px, 50px 50px;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
  background-position: top, bottom, left, right;
}

Вы можете продолжать добавлять больше, и они будут игнорироваться: 

body {
  margin: 0;
  height: 100vh;
  background-image: 
     linear-gradient(red, red), 
     linear-gradient(blue, blue), 
     linear-gradient(red, red), 
     linear-gradient(blue, blue);
  background-size: 20px 20px, 50px 50px,20px 20px, 50px 50px,54px 548px, 0 0, 100vh;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat;
  background-position: top, bottom, left, right,0 0,center, bottom left;
}
...