Question

我正在尝试通过使用动画创建一个简单的图像滑块来学习CSS3。我通过做一些计算成功地实现了我的需要的动画模式，但问题是后续图像不遵循相同的规则，这是一个完全奇怪的行为，因为我所做的只是改变其他图像的％年龄步骤作为动画模式对所有人来说都是完全相同的。但由于一些未知的原因，其他图像没有按预期跟进，我没有看到任何合理的原因。也许你可以帮助我！

jsFiddle

HTML：

<div id='slideshow'>
    <figure id='imagestrip'>
        <img src="images/img2.jpg" alt="Photograph of a Black kite">
        <img src="images/img3.jpg" alt="Profile of a Red kite">
        <img src="images/img4.jpg" alt="Pelicans on moorings at sea">
        <img src="images/img9.jpg" alt="Photograph of Pariah kite">
    </figure>
</div>

CSS：

#slideshow {
    width: 80%;
    margin: 0 auto;
    height: 20em;
    position: relative;
    overflow: hidden;
    perspective: 850px;
/*  outline: 3px solid blue;*/
}
#slideshow figure {
    position: absolute;
    width: 400%;
    height: 100%;
    margin: 0;
    transform-style: preserve-3d;
    animation: slider2 30s infinite;
    outline: 2px solid red;
}
figure img {
    width: 25%;
    height: 100%;
    float: left;
    outline: 3px solid yellow;
}
@keyframes slider2 {
    0% {
        transform: translateX(0%);
        transform: translateZ(0px); /*Zoom-in*/
    }
    2% {
/*      transform: translateX(-25%);*/
        transform: translateZ(250px);
    }
    20% {
        transform: translateX(0%);
        transform: translateZ(250px);
    }
    22% {
        transform: translateX(0%);
        transform: translateZ(0px);
    }
    25% {
        /*transform: translateX(-25%);*/
        transform: translateZ(0);
        transform: translateX(-25%);
    }
    27% {
        /*transform: translateX(-25%);*/
        transform: translateZ(250px);
        transform: translateX(-25%);
    }
    45% {
        transform: translateZ(250px);
        transform: translateX(-25%);
    }
    47% {
        transform: translateZ(0px);
        transform: translateX(-25%);
    }
    50% {
        /*transform: translateZ(100px);*/
        transform: translateX(-50%);
        /*transform: translateZ(0px);*/
    }
    57% {
        transform: translateZ(250px);
        transform: translateX(-50%);
    }
    75% {
        transform: translateZ(250px);
        transform: translateX(-50%);
    }
    77% {
        transform: translateZ(0px);
        transform: translateX(-50%);
    }
    80% {
        /*transform: translateZ(250px);*/
        transform: translateX(-75%);
    }

我的模式如下：

图像放大，例如，1s并停留一段时间，比如5s然后再缩小1s。然后它由transform: translateX(%)向左滑动。这种模式对于第一张图片是成功的，但是当第二张图片滑入时，没有任何反应，尽管其他图像的动画规则相同。

Answer 1

如果要为元素指定多个变换，则应将它们设置为与空格分隔值相同的属性，而不是在下一个变换中添加第二个transform属性。如果你这样做，那么最新的transform将覆盖之前在同一关键帧中提供的那个。

例如，在下面的关键帧中，transform: translateZ(0px)只有一个值。

0% {
  transform: translateX(0%);
  transform: translateZ(0px); 
}

  #slideshow {
    width: 80%;
    margin: 0 auto;
    height: 20em;
    position: relative;
    overflow: hidden;
    perspective: 850px;
    /*				outline: 3px solid blue;*/
  }
  #slideshow figure {
    position: absolute;
    width: 400%;
    height: 100%;
    margin: 0;
    transform-style: preserve-3d;
    animation: slider2 30s infinite;
    outline: 2px solid red;
  }
  figure img {
    width: 25%;
    height: 100%;
    float: left;
    outline: 3px solid yellow;
  }
  @keyframes slider2 {
    0% {
      transform: translateX(0%) translateZ(0px);
    }
    2% {
      transform: translateZ(250px);
    }
    20% {
      transform: translateX(0%) translateZ(250px);
    }
    22% {
      transform: translateX(0%) translateZ(0px);
    }
    25% {
      transform: translateZ(0) translateX(-25%);
    }
    27% {
      transform: translateZ(250px) translateX(-25%);
    }
    45% {
      transform: translateZ(250px) translateX(-25%);
    }
    47% {
      transform: translateZ(0px) translateX(-25%);
    }
    50% {
      transform: translateX(-50%);
    }
    57% {
      transform: translateZ(250px) translateX(-50%);
    }
    75% {
      transform: translateZ(250px) translateX(-50%);
    }
    77% {
      transform: translateZ(0px) translateX(-50%);
    }
    80% {
      transform: translateX(-75%);
    }
  }

<div id='slideshow'>
  <figure id='imagestrip'>
    <img src="https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b" alt="Photograph of a Black kite">
    <img src="https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b" alt="Profile of a Red kite">
    <img src="https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b" alt="Pelicans on moorings at sea">
    <img src="https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b" alt="Photograph of Pariah kite">
  </figure>
</div>

CSS3动画行为异常

1 个答案: