Hemant Vishwakarma: HTML5 animations creating "fizzy" effect on material ui icon shapes

I am making a drag and drop module - and around the cloud icon - I'd like to have various little shapes flutter into/out of existence on a loop -- making it look like a fizzy effect you'd see in a bottle of coke. A kind of magical lucky charms thing.

how would I go about animating these shapes in and out of existence on a loop?

https://codesandbox.io/s/vigorous-satoshi-knusw

-- I've tried adding animation like this - but it's not really working http://jsfiddle.net/zr7sb/10/

    .magic-cloud {
    
      .small {
        font-size: 16px;
      }
    
      .large {
        font-size: 146px;
      }
    
    
      .purple {
        color: #a85e9f;
      }
    
      .blue {
        color: #c9dff7;
      }
    
      .gold {
        color: #fdbd00;
      }
      .lavendar {
        color: #c698c0;
      }
    
    }
    
    
    .bubble {
      position: absolute;
    }
    
    .x1 {
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 0.2;
      -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
      -moz-animation: moveclouds 15s linear infinite;
      -o-animation: moveclouds 15s linear infinite;
    }
    
    .x2 {
      left: 200px;
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.5;
      -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
      -moz-animation: moveclouds 25s linear infinite;
      -o-animation: moveclouds 25s linear infinite;
    }
    .x3 {
      left: 350px;
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.3;
      -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
      -moz-animation: moveclouds 20s linear infinite;
      -o-animation: moveclouds 20s linear infinite;
    }
    .x4 {
      left: 470px;
      -webkit-transform: scale(0.75);
      -moz-transform: scale(0.75);
      transform: scale(0.75);
      opacity: 0.35;
      -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
      -moz-animation: moveclouds 18s linear infinite;
      -o-animation: moveclouds 18s linear infinite;
    }
    .x5 {
      left: 150px;
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.3; 
      -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
      -moz-animation: moveclouds 7s linear infinite;
      -o-animation: moveclouds 7s linear infinite;
    }
    @-webkit-keyframes moveclouds { 
      0% { 
          top: 500px;
      }
      100% { 
          top: -500px;
      }
    }
    
    @-webkit-keyframes sideWays { 
      0% { 
          margin-left:0px;
      }
      100% { 
          margin-left:50px;
      }
    }
    
    @-moz-keyframes moveclouds {     
      0% { 
          top: 500px;
      }
    
      100% { 
          top: -500px;
      }
    }
    @-o-keyframes moveclouds {
      0% { 
          top: 500px;
      }
      100% { 
          top: -500px;
      }
    }

<div className="magic-cloud">
  <CloudQueueIcon className="large" />

  <AddIcon className="small gold bubble x1" />
  <RadioButtonUncheckedOutlinedIcon className="small pink bubble x2" />
  <FiberManualRecordIcon className="small purple bubble x3" />

  <AddIcon className="small purple bubble x1" />
  <RadioButtonUncheckedOutlinedIcon className="small lavendar bubble x2" />
  <FiberManualRecordIcon className="small gold bubble x3" />
</div>