CSS3缩放和移动img上的动画效果

Question

我正在尝试使 CSS3 动画像 this site 中的滑块一样。

我尝试使用以下 CSS：

.animate-in{
  left: -20%;
  opacity: 1;
  top: 0;
  z-index: 1;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-property: left, -webkit-transform, opacity;
  -moz-transition-property: left, transform, opacity;
  -ms-transition-property: left, transform, opacity;
  -o-transition-property: left, transform, opacity;
  transition-property: left, transform, opacity;
  -webkit-transition-duration: 10s, 15s, 2s;
  -moz-transition-duration: 10s, 15s, 2s;
  -ms-transition-duration: 10s, 15s, 2s;
  -o-transition-duration: 10s, 15s, 2s;
  transition-duration: 10s, 15s, 2s;
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
} 

但是这个 CSS 只产生了缩放效果，我需要像上面的例子一样让图片从左右消失的效果。

Answer 1

实现所需缩放 + 淡入淡出和从左侧移动动画的一种方法是确保容器比所需大小大 n 像素，然后添加 translateX(npx) 也作为 transform 堆栈的一部分。

注意：

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

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

.anim {
  position: absolute;
  height: 100%;
  width: calc(100% + 100px);
  background-image: url(https://picsum.photos/1000/500?random=1);
  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;
}

<div class='anim'></div>

---

或者，实现它的另一种方法是使用transform-origin 和transform（不添加任何translate）。

.anim {
  position: absolute;
  height: 100%;
  width: calc(100% + 100px);
  left: -100px;
  background-image: url(https://picsum.photos/1000/500?random=1);
  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;
}

<div class='anim'></div>