css - 背景放大动画
问题描述
我正在尝试在特定秒内放大背景图像的动画。它正在发生,但它再次重置。
我在 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 */
解决方案
您缺少一个简单的属性:animation-fill-mode: forwards
这是添加了该属性的代码,您会看到效果很好
https://codepen.io/manAbl/pen/vjbgYK
进一步阅读:
推荐阅读
- python - Spark 2.3 Executor 内存泄漏
- javascript - 我不明白如何测试用 jest 发送 mailgun 的成功
- node.js - 如何在 Azure 中使用 Node JS 函数上传文件
- python - 有限替换的无序组合
- reactjs - 如何使用 ReactJS、Enzyme 和 Jest 测试 HOC?
- node.js - 尽管提供了数据,node-querybuilder 仍返回错误消息
- node.js - Gulp - 如何发现相对路径深度?
- php - PHP 将 SQL 请求转换为 JSON
- java - 在 8u171/172 上使用 javapackager 创建的本机包包含更多文件
- python - Python 2.7 请求 REST API 调用与 curl 不同