如何使用 CSS 创建 Facebook 帖子动画？

Question

每当我访问 Facebook 时，都会显示此动画

在加载帖子之前。我认为他们在一组 div 上使用 css 来创建假定的帖子行和具有背景的用户图像 渐变

background: -webkit-linear-gradient(left, #ccc, #fff 50%, #ccc);

但是，这些线条的背景渐变会随时间而变化。可以用css创建吗？

Answer 1

尽管这里的老问题是 an article 告诉怎么做。

主要思想

1. 从一个主要的白色（或任何其他颜色）容器开始。
2. 创建一个带有动画渐变背景的子容器。
3. 主要技巧：创建一堆小的白色（或您之前选择的任何颜色）块将它们放在顶部，以便它们与动画块重叠并创建不同动画部分的错觉。

JSFiddle full example

最难的部分可能是 CSS 动画，所以我把它放在这里：

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}

Answer 2

可以使用 CSS3 创建这些类型的动画。 Gif 通常用于加载图像，因为您需要做的就是包含图像，但它们可能非常大，并且可能需要很长时间才能加载到前端。然而，CSS3 的加载速度要快得多，因此您可以将其放在任何地方。

在 CSS3 中，您使用变换和关键帧来制作动画。关键帧定义了对象的变化，例如脉冲图标的大小版本。变换定义了它如何从一个移动到另一个。

更多信息在这里http://www.sitepoint.com/creating-loading-animations-using-only-css3/