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

Posted 2023-03-04

【中文标题】CSS3缩放和移动img上的动画效果

【英文标题】：CSS3 zoom and move animation effect on img

【发布时间】：2016-04-13 05:44:22

【问题描述】：

我正在尝试使 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 只产生了缩放效果，我需要像上面的例子一样让图片从左右消失的效果。

【参考方案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>