1

I've managed to create a slideshow only with CSS3 alone. Slideshow is working smooth and fine. But the problem is i've defined some headers for each image and it's getting displayed as per the image for the first time and when it starts again for the 2nd time all the headers are getting displayed at once.

<pre>

    .cb-slideshow,
    .cb-slideshow:after {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      list-style: none;
    }
    .cb-slideshow li span {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      background-size: cover;
      background-position: 100%;
      background-repeat: none;
      -webkit-animation: slideshow 32s cubic-bezier(.01,.56,.07,.9) infinite 0s;
    }
    .cb-slideshow li div {
      width: 100%;
      top: 0;
      left: 0;
      font-family: Century Gothic;
      position: absolute;
    }
    .cb-slideshow li div h3 {
      font-size: 100px;
      text-align: center;
      text-transform: uppercase;
      opacity: 0;
      color: #000;
      /*margin: 500px 0 0 35px;*/
      -webkit-animation: slideIn 8s;
    }
    .cb-slideshow li:nth-child(1) span {
      background-image: url(1.jpg);
    }
    .cb-slideshow li:nth-child(2) span {
      background-image: url(2.jpg);
      -webkit-animation-delay: 8s;
    }
    .cb-slideshow li:nth-child(3) span {
      background-image: url(1.jpg);
      -webkit-animation-delay: 16s;
    }
    .cb-slideshow li:nth-child(4) span {
      background-image: url(2.jpg);
      -webkit-animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(2) div h3 {
      -webkit-animation-delay: 8s;
    }
    .cb-slideshow li:nth-child(3) div h3 {
      -webkit-animation-delay: 16s;
    }
    .cb-slideshow li:nth-child(4) div h3 {
      -webkit-animation-delay: 24s;
    }
    @-webkit-keyframes slideshow {
      0% {
        opacity: 1;
        -webkit-transform: translateX(2000px);
      }
      5% {
        opacity: 1;
        -webkit-transform: translateX(0);
      }
      25% {
        opacity: 1;
        -webkit-transform: translateX(0);
      }
      30% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
      }
      35% {
        opacity: 0;
        -webkit-transform: translateX(0);
      }
      50% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
      75% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
      100% {
         opacity: 0;
        -webkit-transform: translateX(0);
      }
    }
    @-webkit-keyframes slideIn {
      0% {
        opacity: 1;
        -webkit-transform: translateY(-2000px);
      }
      25% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      35% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      45% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      50% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      65% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      75% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      76% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      97% {
         opacity: 1;
        -webkit-transform: translateY(0);
      }
      100% {
        -webkit-transform: scale(1.1) rotate(3deg);
        opacity: 0;
      }
    }

</pre>
        <ul class="cb-slideshow">
        <li>
            <span>Image 01</span>
            <div>
                <h3>Header 1</h3>
            </div>
        </li>
        <li>
            <span>Image 02</span>
            <div>
                <h3>Header 2</h3>
            </div>
        </li>
        <li>
            <span>Image 03</span>
            <div>
                <h3>Header 3</h3>
            </div>
        </li>
        <li>
            <span>Image 04</span>
            <div>
                <h3>Header 4</h3>
            </div>
        </li>
    </ul>

Some one please help me in fixing the appearance of the header as per the images.

Thanks in advance.

4

1 回答 1

3

给你：http: //jsfiddle.net/Yd9T6/5/

我改变了什么？
我刚刚安排了与幻灯片动画的关键帧同步的 slideIn 动画的关键帧。这是更新的样式：

@-webkit-keyframes slideshow {
    0% {
        opacity: 1;
        -webkit-transform: translateX(2000px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    25% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes slideIn {
    0% {
        opacity: 1;
        -webkit-transform: translateY(-2000px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    25% {
        opacity: 0;
        -webkit-transform: scale(1.1) rotate(3deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(0);
    }
}

一些观察：

  1. 32s 的 30% 是 9.6s 而不是 8s。我将交叉值更改为 25%，使其正好为 8 秒。为了解决这个问题，必须更改一些关键帧规则。
  2. 这不会扩展到更大数量的图像，因为您需要根据您拥有的图像数量设置动画持续时间、延迟和关键帧。您最终需要通过 JS 编写脚本。
  3. webkit 的动画规则实现可能存在错误。如果我保持小提琴的标签打开，无论多久，我都看不到任何问题。但是，如果我切换标签并返回，有时我会看到所有东西都叠放在一起。一旦动画周期完成，它会自动更正。

更新

上述错误实际上是由于时间问题引起的。在将交叉关键帧固定在 8 秒后，这个问题也消失了。为什么它过去只出现在更改标签上 - 对我来说仍然是个谜。

于 2013-11-13T17:33:05.863 回答