How to create a Facebook post animation using css?

Question

Whenever I visit Facebook, this animation shows

before post is loaded. I think they use css on group of divs to create the supposed post lines and user image with background gradient

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

However the gradient of the background of these lines changes with time. Is it possible to create this with css?

Answer 1

Despite it's old question here is an article telling how to do it.

The main idea

1. Start with a main white (or any other color) container.
2. Create a child container with animated gradient background.
3. Main trick: create a bunch of small white (or any color you picked before) blocks place them on top so they will overlap the animated one and create an illusion of different animated parts.

JSFiddle full example

The hardest part may be the CSS animation, so I put it here:

@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;
}