css infinite animation help needed

by

I have few DIV / card elements. (lets say 100px X 100px). first box with double size
What I am looking is first box scaling down to 100X100 and next box scaling up to 200X200 and so on in infinite loop.

Is that possible to make this animation only with css

Check the image as reference

for small size display this animation will be disabled

Thanks,
BT
[1

@keyframes scale {
  10% { /* (100%/5)/2 */
    /*transform: translateY(-20px);*/
    transform: scale(1.5., 1.5);
    /*flex-grow: 4.3;*/
  }
  20% { /* (100%/5) */
    transform: scale(2.0, 2.0);
   }
 }

@keyframes reduce {
  0%{
    box + box: animation: reduce 16s var(--delay) infinite cubic-bezier(.2, .65, .6, 1);
  }
  10% { /* (100%/5)/2 */
    /*transform: translateY(-20px);*/
    transform: scale(1.5., 1.5);
    /*flex-grow: 4.3;*/
  }
  20% { /* (100%/5) */
    transform: scale(1.0, 1.0);
   }
 }

@keyframes box::bounce ~ box {
  10% { /* (100%/5)/2 */
    /*transform: translateY(-20px);*/
    transform: translatex(100px)
    /*flex-grow: 4.3;*/
  }
  20% { /* (100%/5) */
    transform: scale(1, 1);
     
  }

}
.main-box {
  width: 920px;
  display: relative;
  justify-content: space-around;
  align-items: center;
  gap: 160px;
  display: inline-block;
  border: solid yellow;
  margin: 100px;
}
.box {
  margin: 20px;
  width: 120px;
  height: 120px;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 4px;
  display: inline-block;
  animation: reduce 16s var(--delay) infinite cubic-bezier(.2, .65, .6, 1);
}
.box.one {
  
  --bg: slateblue;
  --delay:calc(0*16s/5)
}
.box.two {
  width: 200px;
  height: 200px;
  --bg: deeppink;
  --delay:calc(1*16s/5)
}
.box.three {
  --bg: dodgerblue;
  --delay:calc(2*16s/5)
}
.box.four {
  --bg: red;
  --delay:calc(3*16s/5)
}
.box.five {
  --bg: yellow;
  --delay:calc(4*16s/5)
}


body {
  height: 550px;
  display: relative;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
<div class="main-box">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
</div>

  • Have one animation that scales a box up and back down again. Apply it to all boxes but give each box an animation-delay. So box one has no delay, box 2 is n seconds later, box 3 is n*2 seconds later and so on. (n is the duration your scale animation takes)

    –  

   @keyframes scale-up-down {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(2);
            }
        }

        .main-box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
            animation: scale-up-down 4s infinite;
            transform-origin: center;
        }

        .box:first-child {
            animation-delay: 0s;
        }

        .box:nth-child(2) {
            animation-delay: 1s;
        }

        .box:nth-child(3) {
            animation-delay: 2s;
        }

        .box:nth-child(4) {
            animation-delay: 3s;
        }

        .box:nth-child(5) {
            animation-delay: 4s;
        }
<div class="main-box">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
</div>

Leave a Comment