<main>
    <svg width="100%" height="800">
      <g class="coin1">
        <circle cx="260" cy="220" r="35" fill="#ffd900"/>
        <circle cx="260" cy="220" r="25" fill="#fff300"/>
        <rect   x="255"  y="205"  width="10" height="30" fill="#ffd900"/>
      </g>

      <g class="coin2">
        <circle cx="340" cy="230" r="35" fill="#ffd900"/>
        <circle cx="340" cy="230" r="25" fill="#fff300"/>
        <rect   x="335"  y="215"  width="10" height="30" fill="#ffd900"/>
      </g>
      <g class="coin3">
        <circle cx="420" cy="240" r="35" fill="#ffd900"/>
        <circle cx="420" cy="240" r="25" fill="#fff300"/>
        <rect   x="415"  y="225"  width="10" height="30" fill="#ffd900"/>
      </g>

      <g class="credit-card">
        <rect x="200" y="200" rx="25" ry="25" width="400" height="250" fill="#00a8ff"/>
        <rect x="200" y="245" width="400" height="50" fill="#0b6fa2"/>
        <rect x="210" y="320" width="270" height="25" fill="#e5e5e5"/>
        <rect x="500" y="320" width="85"  height="25" fill="#e5e5e5"/>
        <rect x="210" y="400" width="85"  height="25" fill="#e5e5e5"/>
      </g>
    </svg>
  </main>
.credit-card {

  animation: slide 3s infinite;
}
.coin1 {
  animation: drop 3s infinite;
}

.coin2 {
  animation: drop 6s infinite;
}
.coin3 {
  animation: drop 8s infinite;
}
@keyframes drop {
  0% {
    transform: translate3d(50px, 50px, 0px);
  }
  50% {
    transform: translate3d(25px, 500px, 0px);
  }
  100% {
    transform: translate3d(0px, 800px, 0px);

  }
}
@keyframes slide {
  0% {
    transform: translate3d(0%, 40px, 0px);
    animation-timing-function: ease-in;
  }
  10% {
    transform: translate3d(10%, 90px, 0px);
    animation-timing-function: ease-out;
  }
  20% {
    transform: translate3d(20%, 40px, 0px);
    animation-timing-function: ease-in;
  }
  30% {
    transform: translate3d(30%, 90px, 0px);
    animation-timing-function: ease-out;
  }
  40% {
    transform: translate3d(40%, 40px, 0px);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translate3d(50%, 90px, 0px);
    animation-timing-function: ease-out;
  }
  60% {
    transform: translate3d(60%, 40px, 0px);
    animation-timing-function: ease-in;
  }
  70% {
    transform: translate3d(70%, 90px, 0px);
}
  80% {
    transform: translate3d(80%, 40px, 0px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translate3d(90%, 90px, 0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(100%, 40px, 0px);
    animation-timing-function: ease-in;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.