CSS3 선택 윤곽이 .marquee 컨테이너의 모든 html 요소를 표시하지 않습니다.

Question

내 CSS3 선택 윤곽 효과는 원하는대로 작동하지만 내 <section id="updates_display" class="marquee"></section>에 포함 된 모든 요소를 ​​순환하지 않습니다.

ASP.NET WebForms를 사용하고 있으며 데이터 소스에 연결된 리피터를 사용하여 <a></a> 요소를 Page_Init에 렌더링합니다. 긴급 및 팀 업데이트를 추가하기 전에 선택 윤곽이 내 정상 업데이트를 표시합니다. 긴급 및 팀 업데이트가 런타임에 생성되었으므로 첫 번째 요소에서 다시 시작하기 전에 2를 순환하고 3에 도달하지 않습니다. 나는 내가 더 추가하면 이것이 계속 될 것이라고 생각한다.

section.marquee에 포함 된 <a></a> 개의 요소를 모두 순환 시키려면 어떻게해야합니까?

CSS :

section#updates_display { 
    float: left; 
    width: 60%; 
    height: 25px; 
    padding-top: 13px; 
} 

section.marquee { 
    overflow: hidden; 
    position: relative; 
} 

section.marquee a { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    line-height: 20px; 
    text-align: center; 
    transform:translateX(100%); 
    font-size: 2em; 
} 

@keyframes left-one { 
    0% { 
     transform: translateX(100%); 
    } 

    10% { 
     transform: translateX(0); 
    } 

    40% { 
     transform: translateX(0); 
    } 

    50% { 
     transform: translateX(-100%); 
    } 

    100% { 
     transform: translateX(-100%); 
    } 
} 

@keyframes left-two { 
    0% { 
     transform: translateX(100%); 
    } 
    50% { 
     transform: translateX(100%); 
    } 
    60% { 
     transform: translateX(0); 
    } 
    90% { 
     transform: translateX(0); 
    } 
    100% { 
     transform: translateX(-100%); 
    } 
} 

section.marquee a:nth-child(1) { 
    animation: left-one 20s ease infinite; 
} 
section.marquee a:nth-child(2) { 
    animation: left-two 20s ease infinite; 
} 

a.urgent_update { 
    color: #FF3D00; 
} 
a.normal_update { 
    color: #00E676; 
} 
a.team_update { 
    color: #FFFF00; 
} 

HTML : 여기

<section id="updates_display" class="marquee"> 
    <asp:Repeater ID="UrgentUpdatesRepeater" runat="server" DataSourceID="UrgentUpdatesDataSource"> 
     <ItemTemplate> 
      <a class="urgent_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
     </ItemTemplate> 
    </asp:Repeater> 
    <asp:Repeater ID="TeamUpdatesRepeater" runat="server" DataSourceID="TeamUpdatesDataSource"> 
     <ItemTemplate> 
      <a class="team_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
     </ItemTemplate> 
    </asp:Repeater> 
    <asp:Repeater ID="NormalUpdatesRepeater" runat="server" DataSourceID="NormalUpdatesDataSource"> 
     <ItemTemplate> 
      <a class="normal_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
     </ItemTemplate> 
    </asp:Repeater> 

는 그 안에 포함 된 3 개 링크가 있음을 보여줍니다 크롬에서 관리자의 내용이며, 아직 첫 2를 통해 단주기 ?

는

<section id="updates_display" class="marquee"> 
    <a href="Updates/Post.aspx?p=3" class="urgent_update" target="_blank">Urgent Test</a> 
    <a href="Updates/Post.aspx?p=4" class="team_update" target="_blank">Team Test</a> 
    <a href="Updates/Post.aspx?p=2" class="normal_update" target="_blank">Test</a> 
</section> 

편집 : 좀 더 함께 연주하고 내 문제를 발견 한 내 nth-child() 내 윤곽 CSS로 자리 잡고 있습니다. 나는 nth-child(even/odd)을 사용해 보았습니다.하지만 동시에 모든 시간과 확률을 표시 할 수있는 짝수 요소가 생겼습니다. 해결책을 찾았을 때 여전히 작동합니다.

Answer 1

내 문제는 내 이해가 부족하여 어떻게 @keyframes을 사용했는지, 그리고 그것을 사용하고 있는지에 대한 것이 었습니다. 스크롤 할 요소의 수가 정해져있는 예제에서 원본 코드를 기반으로했습니다. 내 해결책은 @keyframes에 대해 자세히 알아보고 내 애니메이션을 작성하는 것이 었습니다. 나는 div에서 내 링크를 감싸고 div에 애니메이션을 적용하기로했다. 이것은 링크의 좋은 슬로우 스크롤 목록을 만듭니다. 결국 javascript을 사용하여 얼마나 많은 링크가 해당 div에 렌더링되는지 계산할 수 있습니다. 그런 다음 카운트를 기반으로 내 애니메이션 타이밍을 변경하여 항상 느린 속도로 스크롤 할 수 있습니다.

CSS :

section.marquee { 
    display: block; 
    overflow: hidden; 
    position: relative; 
} 

section.marquee_container { 
    display: inline; 
    width: 200%; 
    position: absolute; 
    overflow: hidden; 
    animation: marquee 20s linear infinite; 
} 

    section.marquee a { 
     display: inline; 
     width: 50%; 
     height: 100%; 
     margin: 0; 
     line-height: 20px; 
     text-align: center; 
     font-size: 2em; 
    } 



@keyframes marquee { 
    0% { 
     left: 100%; 
    } 
    5% { 
     left: 90%; 
    } 
    10% { 
     left: 80%; 
    } 
    15% { 
     left: 70%; 
    } 
    20% { 
     left: 60%; 
    } 
    25% { 
     left: 50%; 
    } 
    30% { 
     left: 40%; 
    } 
    35% { 
     left: 30%; 
    } 
    40% { 
     left: 20%; 
    } 
    45% { 
     left: 10%; 
    } 
    50% { 
     left: 0%; 
    } 
    55% { 
     left: -10%; 
    } 
    60% { 
     left: -20%; 
    } 
    65% { 
     left: -30%; 
    } 
    70% { 
     left: -40% 
    } 
    75% { 
     left: -50%; 
    } 
    80% { 
     left: -60%; 
    } 
    85% { 
     left: -70%; 
    } 
    90% { 
     left: -80%; 
    } 
    95% { 
     left: -90%; 
    } 
    100% { 
     left: -100%; 
    } 

} 

a.urgent_update { 
    color: #FF3D00; 
} 
a.normal_update { 
    color: #00E676; 
} 
a.team_update { 
    color: #FFFF00; 
} 

HTML :

<section id="updates_display" class="marquee"> 
     <section class="marquee_container"> 
      <asp:Repeater ID="UrgentUpdatesRepeater" runat="server" DataSourceID="UrgentUpdatesDataSource"> 
       <ItemTemplate> 
        <a class="urgent_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
       </ItemTemplate> 
      </asp:Repeater> 
      <asp:Repeater ID="TeamUpdatesRepeater" runat="server" DataSourceID="TeamUpdatesDataSource"> 
       <ItemTemplate> 
        <a class="team_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
       </ItemTemplate> 
      </asp:Repeater> 
      <asp:Repeater ID="NormalUpdatesRepeater" runat="server" DataSourceID="NormalUpdatesDataSource"> 
       <ItemTemplate> 
        <a class="normal_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
       </ItemTemplate> 
      </asp:Repeater> 
     </section> 
    </section>