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

我正在尝试制作CSS3动画，就像中的滑块一样

我尝试使用以下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只产生了缩放效果，我需要像上面的例子那样使图片从右到左淡入淡出的效果。

实现所需缩放+淡入淡出和从左移动动画的一种方法是确保容器比所需大小大n个像素，然后添加

translateX（npx）

也是

转换

堆栈的一部分

注意：

• 我使用动画而不是转换，因为动画是自动触发的，而转换只在状态更改时触发

• 另一种方法是设置

  背景大小

  和

  背景位置

  的动画，但通常认为使用

  变换

  的动画在性能方面问题较少

.anim{
位置：绝对位置；
身高：100%；
宽度：计算（100%+100px）；
背景图片：url(http://lorempixel.com/1000/500/nature/2);
动画：缩放移动15s线性无限；
}
@关键帧缩放移动{
0% {
转换：缩放（1）translateX（-100px）；
不透明度：0.25；
}
13.33% {
不透明度：1；
/*在2秒内完成不透明度更改*/
}
66.66% {
变换：比例（1.13）translateX（0px）；
不透明度：1；
}
100% {
变换：比例（1.2）translateX（0px）；
不透明度：1；
}
}
身体{
背景色：黑色；
溢出：隐藏；
填充：0；
保证金：0；
}