DEV Community

Discussion on: Make Animated Content Placeholders with HTML and CSS

Collapse
 
erichsia7 profile image
EricHsia7 •

Maybe this method can also.
.div {
width:100px;
height:30px;
background: rgb(227,227,227);
background: linear-gradient(90deg, rgba(227,227,227,1) 0%, rgba(182,182,182,1) 7%, rgba(182,182,182,1) 13%, rgba(227,227,227,1) 25%);
background-size:900%;
background-position: 100% 0%;
animation: animation 1.8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes animation {
0% {
background-position: 100% 0%;
}
99.99% {
background-position: -30% 0%;
}
100% {
background-position: 100% 0%;
}
}

Collapse
 
husseinkizz profile image
Hussein Kizz •

you mean two divs are not necessary here?

Collapse
 
erichsia7 profile image
EricHsia7 •

yes.

Thread Thread
 
husseinkizz profile image
Hussein Kizz •

Then am buying that!

Collapse
 
xinnks profile image
James Sinkala •

Top πŸ‘