<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.