title: How can I get the opacity animation to stop at the last frame of an animated SVG?
body: <p>For some reason once the fade in of the object finishes it returns to being transparent again. </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  
  &lt;svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" width="926.529" height="926.53" viewBox="0 0 926.529 926.53"&gt;&lt;title&gt;12th and Midtown Logo&lt;/title&gt;
  
  &lt;path id="circle" d="M915.953,463.265c0,250.013-202.676,452.689-452.688,452.689S10.576,713.278,10.576,463.265,213.252,10.576,463.265,10.576,915.953,213.252,915.953,463.265Z" fill="#d39d61" opacity="0" stroke="#fff" stroke-miterlimit="10"/&gt;
  
  
  
  &lt;rect id="frame" width="926.529" height="926.53" fill="none"/&gt;
  
  &lt;animate id="changeopacity" xlink:href="#circle" attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="4s" repeatCount="1" restart="never" /&gt;
  &lt;animateTransform id="centercircle" xlink:href="#circle" attributeName="transform" begin="1s" type="translate" dur="3s" values="385,385;0,0"/&gt;
  &lt;animateTransform id="resizecircle" xlink:href="#circle" attributeName="transform" begin="1s" additive="sum" type="scale" dur="3s" values=".05;1"/&gt;
  
  
  &lt;/svg&gt;
  </code></pre>