背景图片Zoom in动画执行后自动重置问题求助

嘿，这个问题我太熟啦！你遇到的其实是CSS动画的默认行为导致的：默认情况下，CSS动画执行完毕后，元素会自动回归到动画开始前的初始状态（也就是transform: scale(1)），所以看起来像是缩放效果被“重置”了。

解决方案 #

只需要给你的动画属性添加animation-fill-mode: forwards即可。这个属性的作用就是让动画结束后，元素保持动画最后一帧的状态，不会再跳回初始样式。

修改后的完整代码 #

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 forwards; 
    animation: zoomin 5s ease-in forwards; 
} 

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

补充说明 #

animation-fill-mode还有其他可选值供你了解：

• backwards：让元素在动画开始前就应用第一帧的样式
• both：同时包含forwards和backwards的效果
  不过针对你的场景，forwards就完全够用啦。

内容的提问来源于stack exchange，提问作者dhana