CSS3缩放并在img上移动动画效果

Question

我试图像this site中的滑块一样制作CSS3动画。

我试过使用下面的CSS：

      SELECT ZNMANE, COUNT(*) OVER () as NumTotal
      FROM XRDK/WHSHIPP_R3
      GROUP BY ZNMANE                   
      HAVING COUNT(ZNMANE) > 1     

但是这个CSS只产生了缩放效果，我需要像上面的例子一样从左右开始褪色的效果。

Answer 1

实现所需缩放+淡入淡出并从左侧动画移动的一种方法是确保容器大于所需大小n个像素，然后将translateX(npx)添加为{{1}的一部分堆栈。

注意：

• 我使用动画而不是过渡，因为动画是自动触发的，而过渡仅在状态变化时触发。

• 另一种方法是为transform和background-size制作动画，但通常情况下，使用background-position的动画在性能方面的问题较少。

＆＃13;

＆＃13;

transform

＆＃13;

.anim {
  position: absolute;
  height: 100%;
  width: calc(100% + 100px);
  background-image: url(http://lorempixel.com/1000/500/nature/2);
  animation: zoom-move 15s linear infinite;
}
@keyframes zoom-move {
  0% {
    transform: scale(1) translateX(-100px);
    opacity: 0.25;
  }
  13.33% {
    opacity: 1;
    /* make opacity change complete in 2s */
  }
  66.66% {
    transform: scale(1.13) translateX(0px);
    opacity: 1;
  }
  100% {
    transform: scale(1.2) translateX(0px);
    opacity: 1;
  }
}
body {
  background-color: black;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

＆＃13;

＆＃13;

＆＃13;

或者，另一种方法是使用<div class='anim'></div>和transform-origin（不添加任何transform）。

＆＃13;

＆＃13;

translate

＆＃13;

.anim {
  position: absolute;
  height: 100%;
  width: calc(100% + 100px);
  left: -100px;
  background-image: url(http://lorempixel.com/1000/500/nature/2);
  animation: zoom-move 15s linear infinite;
}
@keyframes zoom-move {
  0% {
    transform: scale(1);
    transform-origin: -100px 50%;
    opacity: 0.25;
  }
  13.33% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    transform-origin: -100px 50%;
    opacity: 1;
  }
}
body {
  background-color: black;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

＆＃13;

＆＃13;

＆＃13;