Вопросы Теги

Что & ldquo; достаточно & rdquo; и & ldquo; слишком много & rdquo; значение означает в свойстве animation-name?

PDO :: prepare заявляет, что «вы не можете использовать маркер именованного параметра с тем же именем дважды в подготовленном заявлении», поэтому я предполагаю, что это не так.

4
задан Temani Afif 17 January 2019 в 14:37
поделиться

1 ответ

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

.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. [1116 ] 

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

0
ответ дан Temani Afif 17 January 2019 в 14:37
поделиться
Другие вопросы по тегам:

Похожие вопросы: