Question

同时为循环中滑块的标题设置动画。

大家好，

我想同时为3个标题添加动画但有一些延迟，但是我有问题这样做。现在只有一个标题是动画，剩下的是它们的位置。基本上这些是滑块标题和循环中的动画

Heading-1 = image-1 heading
Heading-2 = image-2 heading
Heading-3 = image-3 heading

所有这些标题都显示在顶部，当用户点击箭头滑动下一个图像时，标题-2动画并在标题-1位置和标题-3上滑动，并在标题-2位置和标题-1上滑动滑到Heading-3位置.Below是我的CSS代码。谢谢 HTML：

<div style="width: 1330px; height: 390px;">
   <div>
      <ul id="slider" class=" horizontal" style="width: 6650px; left: -2660px;">
         <li class="panel4 cloned panel" style="width: 1330px; height: 390px;"><iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="800" height="225" frameborder="0" style="width: 100%; height: 100%;"></iframe></li>
         <li class="panel4 panel" style="width: 1330px; height: 390px;"><img src="images/banner.png" style="width: 100%; height: 100%;"></li>
         <li class="panel4 panel activePage" style="width: 1330px; height: 390px;"><img src="images/banner.png" style="width: 100%; height: 100%;"></li>
         <li class="panel4 panel" style="width: 1330px; height: 390px;"><iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0&amp;wmode=opaque&amp;api=1&amp;player_id=asvideo0" width="800" height="225" frameborder="0" id="asvideo0" style="width: 100%; height: 100%;"></iframe></li>
         <li class="panel4 cloned panel" style="width: 1330px; height: 390px;"><img src="images/banner.png" style="width: 100%; height: 100%;"></li>
      </ul>
   </div>
   <div class="controls" style="display: block;">
      <ul class="thumbNav">
         <li class="first"><a class="panel1" href="#"><span><small>2014</small>Title 1</span></a></li>
         <li><a class="panel2 cur" href="#"><span><small>2014</small>Title 2</span></a></li>
         <li class="last"><a class="panel3" href="#"><span><small>2014</small>Title 3</span></a></li>
      </ul>
      <a href="#" class="start-stop" style="display: inline;"><span>Start</span></a>
   </div>
   <span class="arrow back"><a href="#"><span>«</span></a></span><span class="arrow forward"><a href="#"><span>»</span></a></span>
</div>

CSS:

.thumbNav li:nth-of-type(1) a.cur
    {
        animation: mymovea 5s forwards;
        position: relative;
        webkit-animation: mymovea 5s forwards;
    }
    @-webkit-keyframes mymovea
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 220px;
        }
    }
    @keyframes mymovea
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 220px;
        }
    }
    .thumbNav li:nth-of-type(2) a.cur
    {
        animation: mymoveb 5s forwards;
        position: relative;
        webkit-animation: mymoveb 5s forwards;
    }
    @-webkit-keyframes mymoveb
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 150px;
        }
    }
    @keyframes mymoveb
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 150px;
        }
    }
    .thumbNav li:nth-of-type(3) a.cur
    {
        animation: mymovec 5s forwards;
        position: relative;
        webkit-animation: mymovec 5s forwards;
    }
    @-webkit-keyframes mymovec
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 60px;
        }
    }
    @keyframes mymovec
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 60px;
        }
    }

同时为循环中滑块的标题设置动画

0 个答案: