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

【问题标题】：How to keep image with Ken Burns effect in bigger size?如何使具有 Ken Burns 效果的图像保持更大尺寸？
【发布时间】：2018-08-15 19:12:22
【问题描述】：

我在图像上使用 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 */
  }
}

&lt;img class="logopartner" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"&gt;

【问题讨论】：

w3schools.com/cssref/css3_pr_animation-fill-mode.asp

标签： css

【解决方案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 */
  }
}

&lt;img class="logopartner" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"&gt;

【讨论】：