css - 如何使具有 Ken Burns 效果的图像保持更大尺寸？

Question

我在图像上使用 Ken Burns 效果。它运行得很好，图像放大到 1.2 比例。但动画后图像将恢复到 1.0 比例。如何让它保持在 1.2 规模？

我在我的 Ken Burns 的工作原理下方发送了一个代码。

谢谢你。

.logopartner {
  position: absolute;
  top: 25%;
  left: 25%;
  animation: move 80s ease;
  /* Add infinite to loop. */
  
  -ms-animation: move 20s ease;
  -webkit-animation: move 20s ease;
  -0-animation: move 20s ease;
  -moz-animation: move 20s ease;
  position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    /* IE 9 */
    
    -webkit-transform: scale(1.0);
    /* Safari and Chrome */
    
    -o-transform: scale(1.0);
    /* Opera */
    
    -moz-transform: scale(1.0);
    /* Firefox */
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    /* IE 9 */
    
    -webkit-transform: scale(1.2);
    /* Safari and Chrome */
    
    -o-transform: scale(1.2);
    /* Opera */
    
    -moz-transform: scale(1.2);
    /* Firefox */
  }
}

<img class="logopartner" src="https://cdn.sstatic.net/Sites/stackoverflow/img/[e-mail]?v=73d79a89bded">

标签： css

Answer 1

您可以将比例默认设置为 1.2，因此其最终目标是其默认比例。

.logopartner {
  position: absolute;
  top: 25%;
  left: 25%;
  animation: move 80s ease;
  transform: scale(1.2);
  /* Add infinite to loop. */
  
  -ms-animation: move 20s ease;
  -webkit-animation: move 20s ease;
  -0-animation: move 20s ease;
  -moz-animation: move 20s ease;
  position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    /* IE 9 */
    
    -webkit-transform: scale(1.0);
    /* Safari and Chrome */
    
    -o-transform: scale(1.0);
    /* Opera */
    
    -moz-transform: scale(1.0);
    /* Firefox */
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    /* IE 9 */
    
    -webkit-transform: scale(1.2);
    /* Safari and Chrome */
    
    -o-transform: scale(1.2);
    /* Opera */
    
    -moz-transform: scale(1.2);
    /* Firefox */
  }
}

<img class="logopartner" src="https://cdn.sstatic.net/Sites/stackoverflow/img/[e-mail]?v=73d79a89bded">