对同一类的不同对象使用相同的动画答案

【问题标题】：Use the same animation on different objects of same class对同一类的不同对象使用相同的动画
【发布时间】：2023-03-17 18:47:01
【问题描述】：

<!DOCTYPE html>
<html>
<head>
    <style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body {
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1,
.item-2{
	position: absolute;
  display: block;
	top: 2em;

  width: 60%;

  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

    </style>
</head>

{% for person in persons %}

<p class="item-1">
    Person Name: {{ persons.awards_type }}
    <br/>
    <br/>
    Person ID: {{ persons.awards_nomination }}
    <br/>
    Job: {{ persons.reason }}
</p>
{% endfor %}


</html>

我是 CSS 和 HTML 的新手，想知道是否可以在同一类的不同对象上使用相同的 CSS 动画。 persons 是类 Person 中包含人员信息的对象列表。

我想将persons 列表中的每个对象显示为动画。由于列表中的元素数量可能会发生变化，我想知道如何实现这一点。

我正在使用 django 将persons 列表发送到 HTML 页面。

<!DOCTYPE html>
<html>
<head>
    <style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body {
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1{
    position: absolute;
  display: block;
    top: 2em;

  width: 60%;

  font-size: 2em;

    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.item-1{
    animation-name: anim-1;
}


@keyframes anim-1 {
    0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}


    </style>
</head>

{% for person in persons %}

<p class="item-1">
    Person Name: {{ person.person_name }}
    <br/>
    <br/>
    Person ID: {{ person.person_id }}
    <br/>
    Job: {{ person.occupation }}
</p>
{% endfor %}


</html>

上述代码的问题是所有名称都相互重叠。有人可以建议我们是否可以用 CSS 实现这个结果。

【问题讨论】：

请创建一个有效的 sn-p - 您在此处的编辑工具栏中有 sn-p 按钮

标签： html css

【解决方案1】：

尝试使用 css animation-delay

<!DOCTYPE html>
<html>

  <head>
    <style>
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
      body {
        font-family: 'Open Sans', 'sans-serif';
        color: #cecece;
        background: #222;
        overflow: hidden;
      }

      .item-1,
      .item-2,
      .item-3,
      .item-4 {
        position: absolute;
        display: block;
        top: 2em;
        width: 60%;
        font-size: 2em;
        animation-duration: 20s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        left: -100%;
        animation-name: anim-1;
      }

      .item-1 {
        animation-delay: 0s
      }

      .item-2 {
        animation-delay: 5s
      }

      .item-3 {
        animation-delay: 10s
      }

      .item-4 {
        animation-delay: 15s
      }

      @keyframes anim-1 {
        0%,
        8.3% {
          left: -100%;
          opacity: 0;
        }
        8.3%,
        25% {
          left: 25%;
          opacity: 1;
        }
        33.33%,
        100% {
          left: 110%;
          opacity: 0;
        }
      }

    </style>
  </head>



  <p class="item-1">
    Person Name: 1
    <br/>
    <br/> Person Identification: 1
    <br/> Job: 1
  </p>
  <p class="item-2">
    Person Name: 2
    <br/>
    <br/> Person Identification: 2
    <br/> Job: 2
  </p>
  <p class="item-3">
    Person Name: 3
    <br/>
    <br/> Person Identification: 3
    <br/> Job: 3
  </p>
  <p class="item-4">
    Person Name: 4
    <br/>
    <br/> Person Identification: 4
    <br/> Job:4
  </p>



</html>

【讨论】：

我不知道列表中有多少项。我必须让它动态而不是静态。你能编辑你的答案吗？感谢您的回答。
只需根据 for 循环索引添加内联 css <p class="item-1" style="animation-delay:{{index}}s">
，而不是我使用 forloop.counter0 的索引。但我面临的问题是第二个对象的动画在一秒钟后出现并且与第一个对象信息重叠。
能不能乘以计数器索引{{ forloop.counter0 * 5 }}s
您是否将left: -100%; 添加到.item-1 css