<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
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
  2. https://codepen.io/gregh/pen/jyNrJW.css

External JavaScript

This Pen doesn't use any external JavaScript resources.