Skeleton CSS animation

Question

How do I add an animation here using CSS?

.card:empty {
height: 40rem;
background-image: linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);
background-size: 25% 15px,85% 20px,83% 20px,85% 20px,83% 20px,90% 15px,92% 15px,87% 15px,93% 15px,20% 15px,40% 15px,40% 15px,25% 15px;
background-position: 0 0, 0 60px,0 95px,0 130px,0 165px,0 220px,0 250px,0 280px,0 310px,0 350px,40% 350px,0 380px,60% 380px;
background-repeat: no-repeat;
}

<div class="card"></div>

Nothing is shown. What are you trying to do? – A.L Jun 22 '23 at 18:25 — A.L, Jun 22 '23 at 18:25
all i wanna add a animation,code working in the codepen – rocky Jun 22 '23 at 18:26 — rocky, Jun 22 '23 at 18:26

score 2 · Accepted Answer · edited Jun 22 '23 at 20:47

I would convert your background declaration into mask, then add a background animation:

.card:empty {
  height: 40rem;
  
  --g: linear-gradient(#000 0 0) no-repeat;
  -webkit-mask: var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g);
  -webkit-mask-size: 25% 15px, 85% 20px, 83% 20px, 85% 20px, 83% 20px, 90% 15px, 92% 15px, 87% 15px, 93% 15px, 20% 15px, 40% 15px, 40% 15px, 25% 15px;
  -webkit-mask-position: 0 0, 0 60px, 0 95px, 0 130px, 0 165px, 0 220px, 0 250px, 0 280px, 0 310px, 0 350px, 40% 350px, 0 380px, 60% 380px;
  
  background: linear-gradient(-60deg, #ccc 33%,#ddd, #ccc 66%) right/300% 100%;
  animation: move 1s linear infinite;
}

@keyframes move {
  to {background-position: left}
}

<div class="card"></div>

Related for more detail about the background animation: Responsive shine animation using linear-gradient as background

score 1 · Answer 2 · answered Jun 22 '23 at 20:58

I've created @keyframes that's called skeleton that changes opacity property to 1 on 0% and 100%. And to 0 on 50%. Also, just don't forget to declare animation property.

So here's your final code:

.card:empty {
    height: 40rem;
    background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc),
        linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);
    animation: skeleton 2s infinite;
    background-size: 25% 15px, 85% 20px, 83% 20px, 85% 20px, 83% 20px, 90% 15px, 92% 15px, 87% 15px, 93% 15px, 20% 15px, 40% 15px, 40% 15px, 25% 15px;
    background-position: 0 0, 0 60px, 0 95px, 0 130px, 0 165px, 0 220px, 0 250px, 0 280px, 0 310px, 0 350px, 40% 350px, 0 380px, 60% 380px;
    background-repeat: no-repeat;
}

@keyframes skeleton {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

<div class="card"></div>

Feel free to adjust the animation to better fit your needs.

I tried your code too it also works,great. – rocky Jun 23 '23 at 06:32 — rocky, Jun 23 '23 at 06:32

Skeleton CSS animation

2 Answers2