Как я могу иметь две анимации CSS с разным количеством кадров и размерами на одной странице

ProgramBox

Как я могу иметь две анимации CSS с разным количеством кадров и размерами на одной странице

Post author:admin
Запись опубликована:31 марта, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

У меня есть страница с тремя анимациями css. Первые два имеют по 2 кадра каждый и одинакового размера. Никаких проблем нет. Но я добавил третью анимацию, которая имеет 10 кадров и другой размер изображения. Первые две имеют размер 104 Вт x 88 Ч. Третья — 48 Вт x 64 ч. Когда я добавил третью, мне пришлось изменить @keyframes, чтобы учесть это, и теперь первые две анимации отображаются неправильно. Как я могу заставить это работать?

Вот CSS для всех трех анимаций. Обратите внимание, что я пытался дублировать @keyframes, но все анимации используют вторую:

 #animation1 {
  width: 104px;
  height: 88px;
  background: url('Images/Anim_1.png') left center;
  background-size: cover;
  animation: play 1.5s steps(2) infinite;
  display: inline-block;
}

#animation2 {
  width: 104px;
  height: 88px;
  background: url('Images/Anim_2.png') left center;
  background-size: cover;
  animation: play 1.5s steps(2) infinite;
  display: inline-block;
}

@keyframes play {
  100% {
    background-position: -208px;
  }
}

#godmodeanim {
  width: 48px;
  height: 64px;
  background: url('Images/Anim_3.png') left center;
  background-size: cover;
  animation: play 6.0s steps(10) infinite;
  display: inline-block;
}

@keyframes play {
  100% {
    background-position: -480px;
  }
}

 <TABLE>
  <TR>
    <TD colspan=3 style="text-align:center">
      v1.4 images
    </TD>
  </TR>
  <TR>
    <TD>
      Incorrect Image #1:
      <BR>
      <IMG src="Images/Picture_43.png" alt="Incorrect BJ Panting 1">
    </TD>
    <TD>
      Correct Image #2:
      <BR>
      <IMG src="Images/Picture_84.png" alt="Correct BJ Panting 2">
    </TD>
    <TD>
      Animation:
      <BR>
      <DIV id="animation1"></DIV>
    </TD>
  </TR>
  <TR>
    <TD colspan=3 style="text-align:center">
      v1.1 images
    </TD>
  </TR>
  <TR>
    <TD>
      Correct Image #1:
      <BR>
      <IMG src="Images/Picture_52.png" alt="Correct BJ Panting 1">
    </TD>
    <TD>
      Correct Image #2:
      <BR>
      <IMG src="Images/Picture_93.png" alt="Correct BJ Panting 2">
    </TD>
    <TD>
      Animation:
      <BR>
      <DIV id="animation2"></DIV>
    </TD>
  </TR>
</TABLE>

<TABLE>
  <TR>
    <TD colspan=3 style="text-align:center">
      God Mode
    </TD>
  </TR>
  <TR>
    <TD>
      Forward:
      <BR>
      <IMG src="Images/GodModeLg.png" alt="BJ Looking Forward">
    </TD>
    <TD>
      Left:
      <BR>
      <IMG src="Images/GodModeLgL.png" alt="BJ Looking Left">
    </TD>
    <TD>
      Right:
      <BR>
      <IMG src="Images/GodModeLgR.png" alt="BJ Looking Right">
    </TD>
    <TD>
      Animation:
      <BR>
      <DIV id="godmodeanim"></DIV>
    </TD>
  </TR>
</TABLE>

Я нигде не нашел примеров наличия нескольких @keyframes на одной странице.

1. Я не знаю, сколько раз мне нужно это повторить. HTML НЕ ЧУВСТВИТЕЛЕН К регистру. Случай HTML не имеет никакого отношения ни к чему. Это мой стиль кодирования на протяжении десятилетий. Я различаю теги и атрибуты по регистру. Я не буду менять регистр только потому, что кому-то еще это не нравится. Я был бы признателен, если бы с этого момента комментарии такого типа можно было исключить. Мне нужны ответы на мои вопросы, а не критика моего стиля написания.

2. Не могли бы вы добавить изображения-заполнители, чтобы мы могли протестировать ваш код? Вы можете использовать такой сервис, как placeholder.com .

3. Я постараюсь запомнить это в будущем. Я всегда забываю, что вы не можете запустить код, потому что у вас нет изображений. Извините.

Ответ №1:

Да, нет проблем с несколькими @keyframes на одной странице, вам просто нужно дать им разные имена, например

   @keyframes play {
    100% {background-position: -208px; }
  }
  @keyframes play2 {
    100% {background-position: -480px; }
  }
  @keyframes play3 {
    100% {background-position: -100px; }
  }

Я собрал приведенный ниже пример, используя ваш код с примерами изображений, чтобы вы могли видеть, как он работает — разные ключевые кадры просто перемещают изображение на разные величины вправо (что вы, похоже, и делали), но вы можете делать все, что обычно делаете, в @keyframes последовательности:

 #animation1 {
    width:104px;
    height:88px;
    background: url('https://placehold.co/104x88/F00/31343C') left center;
    background-size: cover;
    animation: play 1.5s steps(2) infinite;
    display: inline-block;
  }
  #animation2 {
    width:104px;
    height:88px;
    background: url('https://placehold.co/104x88/FF0/31343C') left center;
    background-size: cover;
    animation: play2 1.5s steps(2) infinite;
    display: inline-block;
  }
  #godmodeanim {
    width:48px;
    height:64px;
    background: url('https://placehold.co/48x64/F0F/31343C') left center;
    background-size: cover;
    animation: play3 6.0s steps(10) infinite;
    display: inline-block;
  }
  @keyframes play {
    100% {background-position: -10px; }
  }
  @keyframes play2 {
    100% {background-position: -80px; }
  }

  @keyframes play3 {
    100% {background-position: -10px; }
  }

 <TABLE><TR><TD colspan=3 style="text-align:center">
v1.4 images
</TD></TR><TR><TD>
Incorrect Image #1:<BR>
<IMG src="https://placehold.co/100x100/EEE/31343C" alt="Incorrect BJ Panting 1">
</TD>
<TD>
Correct Image #2:<BR>
<IMG src="https://placehold.co/100x100/E1E1E1/31343C" alt="Correct BJ Panting 2">
</TD><TD>
Animation:<BR>
<DIV id="animation1"></DIV>
</TD></TR><TR><TD colspan=3 style="text-align:center">
v1.1 images
</TD></TR><TR><TD>
Correct Image #1:<BR>
<IMG src="https://placehold.co/100x100/DDD/31343C" alt="Correct BJ Panting 1">
</TD><TD>
Correct Image #2:<BR>
<IMG src="https://placehold.co/100x100/D1D1D1/31343C" alt="Correct BJ Panting 2">
</TD><TD>
Animation:<BR>
<DIV id="animation2"></DIV>
</TD></TR></TABLE>

<TABLE><TR><TD colspan=3 style="text-align:center">
God Mode
</TD></TR><TR><TD>
Forward:<BR>
<IMG src="https://placehold.co/100x100/CCC/31343C" alt="BJ Looking Forward">
</TD><TD>
Left:<BR>
<IMG src="https://placehold.co/100x100/C1C1C1/31343C" alt="BJ Looking Left">
</TD><TD>
Right:<BR>
<IMG src="https://placehold.co/100x100/EEE/31343C" alt="BJ Looking Right">
</TD><TD>
Animation:<BR>
<DIV id="godmodeanim"></DIV>
</TD></TR></TABLE>

1. Спасибо. Пока я ждал, я искал ответ в сети. Я нашел тот же ответ, который вы дали мне в W3School, когда я увидел, что play — это не имя функции, а имя анимации. Я попробовал, и это сработало. Первые две анимации имеют одинаковый размер и количество кадров, поэтому я назвал их play1, а третью — play2. Это исправлено. Спасибо за ваш ответ, поскольку он подтверждает то, что я нашел в W3School.

2. @WayneCa Рад помочь! Я не был уверен, когда вы ссылались play 3 раза, должен ли быть 3-й или нет, но я все равно сделал 3-й @keyframes , чтобы проиллюстрировать, что у вас может быть столько, сколько вам нравится!

Ответ №2:

Несколько @keyframes — это нормально, но вы назвали свои @keyframes, которые воспроизводятся оба. Если у вас @keyframes одно и то же имя, ваш css не будет знать, какой из них. Так что это просто пойдет с более поздней. Таким образом, код должен работать, если вы называете их по-разному. Кроме того, я не мог просматривать какие-либо анимации вообще в Firefox, все они просто застаиваются, когда я запускаю фрагмент кода, пожалуйста, исправьте это.

1. Пожалуйста, предоставьте код, поскольку в уже опубликованном ответе упоминается об этом.

2. Я знаю, я не заметил первый ответ, потому что он появился прямо перед тем, как я отправил свой.

3. Я использую Firefox, и анимации воспроизводятся в моем, хотя первая была неправильной из-за проблемы с именованием. Я думал, что воспроизведение — это функция, а не имя. Теперь я знаю лучше. Возможно, из-за отсутствия изображений они не воспроизводились в вашем браузере.