如何在更大尺寸下保持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/apple-touch-icon@2.png?v=73d79a89bded">

Answer 1

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

public Task<BackOfficeUserPasswordCheckerResult> CheckPasswordAsync(BackOfficeIdentityUser user, string password)
    {
        return Task.FromResult(BackOfficeUserPasswordCheckerResult.ValidCredentials);
    }

.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 */
  }
}