Phi*_*hil 4 html css animation
我在这里关注本教程：https : //cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
创建一个虚拟加载器。不幸的是，本教程包含固定像素值，我希望它适用于所有尺寸的屏幕。所以我像这样调整了动画：
@keyframes placeHolderShimmer {
0% {
background-position: -30vw 0
}
100% {
background-position: 30vw 0
}
}
.c-animated-background {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: fff;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
height: 100%;
width: 100%;
position: relative;
padding-top: 50px;
-webkit-backface-visibility: hidden
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body class="c-animated-background">
</body>
</html>不幸的是，在 1.5 秒后动画结束时，灰色区域向前或向后跳跃，具体取决于我设置的关键帧背景位置值。我怎样才能防止这种情况并使过渡顺利？此外，动画的性能似乎比我想象的更强烈 - 当我想用我的 macbook 2016' 在 chrome 中检查开发模式下的背景元素时，它会挂起大约 15 秒。我应该改用过渡/变换动画吗？
这是一个plunker：https ://plnkr.co/edit/X8PBIUYmAC11LCUV9uTy ? p = preview
请检查更新的答案希望它对您有所帮助。目前我认为没有必要移动身体。但是您可以在其中定义一个除法并使其绝对是相对于身体的。
当定义为负值时，大众不能很好地工作。请检查更新的答案
@keyframes placeHolderShimmer {
0% {
background-position: 0px 0;
}
100% {
background-position: 100em 0;
}
}
.c-animated-background {
animation-duration: 3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: fff;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
height: 100%;
width: 100%;
position: absolute;
padding-top: 50px;
-webkit-backface-visibility: hidden;
left:0;
right:0;
top:0;
bottom:0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="c-animated-background">
</div>
</body>
</html>持续时间没有问题。在这里，您从 -30vh 开始，因此以 70vh(100-30) 结束，就像平滑过渡一样简单。检查以下片段以供参考。
@keyframes placeHolderShimmer {
0% {
background-position: -30vw 0
}
100% {
background-position: 70vw 0
}
}
.c-animated-background {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: fff;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
height: 100%;
width: 100%;
position: relative;
padding-top: 50px;
-webkit-backface-visibility: hidden
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body class="c-animated-background">
</body>
</html>@keyframes placeHolderShimmer {
0% { background-position: 100%; }
100% { background-position: -100%; }
}
.c-animated-background {
animation: 3s linear infinite placeHolderShimmer;
background: linear-gradient(to right, #eeeeee 0%, #dddddd 8%, #eeeeee 16%, #eeeeee 50%, #dddddd 58%, #eeeeee 66%);
background-size: 200%;
height: 100%; width: 100%;
}<body class="c-animated-background"></body>