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 πŸ‘