背景放大动画答案

【问题标题】：Background zoom in animation背景放大动画
【发布时间】：2018-05-23 14:52:11
【问题描述】：

我正在尝试放大特定秒的背景图像动画。它正在发生，但它会再次重置。

我在 jsfiddle 中创建了示例链接： https://jsfiddle.net/onlinesolution/tk6rcLdx/

我在这里错过了什么？

body:before{
  content:"";
  position:absolute;
  top:0px;
  left:0px;
  height: 100vh;
   width: 100%;
    background-image: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg");
    background-position:center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
     z-index: -9;
    -webkit-animation: zoomin 5s ease-in;
    animation: zoomin 5s ease-in;
        }

/* Zoom in Keyframes */
@-webkit-keyframes zoomin {
  0% {transform: scale(1);}
  100% {transform: scale(1.5);}
}
@keyframes zoomin {
  0% {transform: scale(1);}
  100% {transform: scale(1.5);}
} /*End of Zoom in Keyframes */

【问题讨论】：

标签： css css-transitions css-animations

【解决方案1】：

您缺少一个简单的属性：animation-fill-mode: forwards

这是您添加了该属性的代码，您会看到它工作正常

https://codepen.io/manAbl/pen/vjbgYK