<div class="container">
<svg width="120px" height="120px" viewBox="629 789 219 213" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="6.5261697%" y1="-7.01275638%" x2="91.6685015%" y2="109.46658%" id="orangeGradient">
<stop stop-color="#FB61C2" offset="0%"></stop>
<stop stop-color="#F76B1C" offset="100%"></stop>
</linearGradient>
</defs>
<rect fill="url(#orangeGradient)" fill-rule="evenodd" x="629" y="789.318064" width="219" height="212" rx="13"></rect>
</svg>
</div>
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
svg {
animation: fadeInDown 1s linear;
animation-fill-mode: forwards;
animation-iteration-count: 1.5;
}
View Compiled
This Pen doesn't use any external JavaScript resources.