Question 191990 in CSS Question posted in
Some basic documentation can be found here.

Skeleton CSS animation

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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search