Question

<!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实现这个结果。

Answer 1

尝试使用css animation-delay

＆＃13;

<!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>

＆＃13;

在同一个班级

1 个答案: