我有以下动画： 加载页面时，触发动画显示3个省略号。此外，当您将鼠标悬停在svg元素上时，您还可以播放动画。如果单击按钮，则还有动画。
除了Safari浏览器外，它无处不在。它在加载页面时播放2次。它是因为添加了SHOWN类和TRANSITION属性。
你知道如何解决这个问题吗？
<script type="text/javascript">
function func() {
document.getElementsByClassName('container')[0].classList.add("shown");
}
setTimeout(func, 1000);
</script>
<div class="container">
<div class="svg">
<svg width="588px" height="512px" viewBox="0 0 588 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient cx="96.4297259%" cy="15.499442%" fx="96.4297259%" fy="15.499442%" r="80.0645369%" gradientTransform="translate(0.964297,0.154994),scale(0.597701,1.000000),rotate(111.076207),translate(-0.964297,-0.154994)" id="radialGradient-1">
<stop stop-color="#1796FE" offset="0%"></stop>
<stop stop-color="#1796FF" stop-opacity="0" offset="100%"></stop>
</radialGradient>
<radialGradient cx="96.4297259%" cy="15.499442%" fx="96.4297259%" fy="15.499442%" r="80.0645369%" gradientTransform="translate(0.964297,0.154994),scale(0.597701,1.000000),rotate(111.076207),translate(-0.964297,-0.154994)" id="radialGradient-2">
<stop stop-color="#00D2CE" offset="0%"></stop>
<stop stop-color="#1796FF" stop-opacity="0" offset="100%"></stop>
</radialGradient>
<path d="M0.201171875,0.338867188 L7.65917969,53.88204 C16.8297526,92.6273467 49.4951172,112 105.655273,112 C161.81543,112 195.925456,96.1250885 207.985352,64.3752655 L216.59668,0.338867188 L0.201171875,0.338867188 Z" id="path-3"></path>
<linearGradient x1="0%" y1="50%" x2="97.0264668%" y2="98.5132334%" id="linearGradient-5">
<stop stop-color="#1796FF" offset="0%"></stop>
<stop stop-color="#141935" offset="100%"></stop>
</linearGradient>
<linearGradient x1="91.1850287%" y1="8.8149713%" x2="0%" y2="100%" id="linearGradient-6">
<stop stop-color="#0084FF" offset="0%"></stop>
<stop stop-color="#25CADF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="50%" x2="100%" y2="100%" id="linearGradient-7">
<stop stop-color="#008CFF" offset="0%"></stop>
<stop stop-color="#141935" stop-opacity="0.840013587" offset="100%"></stop>
</linearGradient>
<linearGradient x1="58.8362069%" y1="0%" x2="4.1697535%" y2="92.9129464%" id="linearGradient-8">
<stop stop-color="#546EFF" offset="0%"></stop>
<stop stop-color="#00FFFB" offset="100%"></stop>
</linearGradient>
<radialGradient cx="50%" cy="80.5791796%" fx="50%" fy="80.5791796%" r="68.1773364%" gradientTransform="translate(0.500000,0.805792),scale(0.864964,1.000000),rotate(-90.000000),scale(1.000000,0.821060),translate(-0.500000,-0.805792)" id="radialGradient-9">
<stop stop-color="#04CAD5" offset="0%"></stop>
<stop stop-color="#651FFF" stop-opacity="0" offset="100%"></stop>
</radialGradient>
<path d="M214,237 L274,0 L0,0 L60,237 C60,211.594902 94.4740743,191 137,191 C179.525926,191 214,211.594902 214,237 Z" id="path-10"></path>
<pattern id="pattern-11" width="512" height="512" x="-512" y="-512" patternUnits="userSpaceOnUse">
<use xlink:href="#image-12"></use>
</pattern>
<linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="linearGradient-13">
<stop stop-color="#1796FF" offset="0%"></stop>
<stop stop-color="#00D2CE" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-14">
<stop stop-color="#0084FF" offset="0%"></stop>
<stop stop-color="#1C2340" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient-15">
<stop stop-color="#1796FF" offset="0%"></stop>
<stop stop-color="#00C6C2" offset="100%"></stop>
</linearGradient>
<radialGradient cx="91.4953348%" cy="21.0272753%" fx="91.4953348%" fy="21.0272753%" r="64.3551638%" gradientTransform="translate(0.914953,0.210273),rotate(136.562683),scale(1.000000,2.219463),translate(-0.914953,-0.210273)" id="radialGradient-16">
<stop stop-color="#00D2CE" offset="0%"></stop>
<stop stop-color="#1796FF" stop-opacity="0" offset="100%"></stop>
</radialGradient>
<radialGradient cx="92.7238408%" cy="19.2250741%" fx="92.7238408%" fy="19.2250741%" r="67.5736129%" gradientTransform="translate(0.927238,0.192251),rotate(134.212462),scale(1.000000,1.464800),translate(-0.927238,-0.192251)" id="radialGradient-17">
<stop stop-color="#00D2CE" offset="0%"></stop>
<stop stop-color="#651FFF" stop-opacity="0" offset="100%"></stop>
</radialGradient>
<linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient-18">
<stop stop-color="#536EFF" offset="0%"></stop>
<stop stop-color="#25CADF" offset="100%"></stop>
</linearGradient>
<filter x="-42.9%" y="-56.0%" width="185.7%" height="211.9%" filterUnits="objectBoundingBox" id="filter-19">
<feGaussianBlur stdDeviation="50" in="SourceGraphic"></feGaussianBlur>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1440x900" transform="translate(-437.000000, -103.000000)">
<g id="illustration" transform="translate(556.000000, 161.000000)">
<g id="clock_bottom_1" class="clock_bottom_1">
<ellipse id="Oval" fill="url(#radialGradient-1)" transform="translate(87.000000, 52.000000) rotate(-180.000000) translate(-87.000000, -52.000000) " cx="87" cy="52" rx="87" ry="52"></ellipse>
<ellipse id="Oval" fill="url(#radialGradient-2)" transform="translate(117.000000, 52.000000) scale(-1, 1) rotate(-180.000000) translate(-117.000000, -52.000000) " cx="117" cy="52" rx="87" ry="52"></ellipse>
</g>
<g id="clock_bottom_2" class="clock_bottom_2" opacity="0.318917572">
<ellipse id="Oval" fill="url(#radialGradient-1)" transform="translate(87.000000, 52.000000) rotate(-180.000000) translate(-87.000000, -52.000000) " cx="87" cy="52" rx="87" ry="52"></ellipse>
<ellipse id="Oval" fill="url(#radialGradient-2)" transform="translate(117.000000, 52.000000) scale(-1, 1) rotate(-180.000000) translate(-117.000000, -52.000000) " cx="117" cy="52" rx="87" ry="52"></ellipse>
</g>
<g id="clock_bottom_3" class="clock_bottom_3" opacity="0.316786674">
<ellipse id="Oval" fill="url(#radialGradient-1)" opacity="0.24" transform="translate(87.000000, 52.000000) rotate(-180.000000) translate(-87.000000, -52.000000) " cx="87" cy="52" rx="87" ry="52"></ellipse>
<ellipse id="Oval" fill="url(#radialGradient-2)" opacity="0.24" transform="translate(117.000000, 52.000000) scale(-1, 1) rotate(-180.000000) translate(-117.000000, -52.000000) " cx="117" cy="52" rx="87" ry="52"></ellipse>
</g>
</g>
</g>
</g>
</svg>
<div class="text_block">
<div class="login">
<button onclick="javascript:document.getElementsByTagName('body')[0].classList.add('logining')">
<span>Login page</span>
</button>
</div>
</div>
</div><!--/centered -->
</div>
.svg {position: absolute; width: 920px; left: 50%; margin-left: -460px; padding-top: 70px; text-align: center;}
.login { font: normal 12px/200% Arial; color: #929bbd; text-align: center; padding-top: 30px;}
.text_block { position: absolute; text-align: center; width: 100%; margin-top: 30px; transition: all 0.4s; animation: timeout 0.4s linear; animation-delay: 1.3s; animation-fill-mode: forwards;}
.login button { width: 140px; height: 40px; border: none; cursor: pointer; border-radius: 4px; color: #fff; text-transform: uppercase; font: normal 12px Arial; margin-top: 50px; background: rgba(110,190,225,1);
background: -moz-linear-gradient(top, rgba(110,190,225,1) 0%, rgba(68,121,235,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(110,190,225,1)), color-stop(100%, rgba(68,121,235,1)));
background: -webkit-linear-gradient(top, rgba(110,190,225,1) 0%, rgba(68,121,235,1) 100%);
background: -o-linear-gradient(top, rgba(110,190,225,1) 0%, rgba(68,121,235,1) 100%);
background: -ms-linear-gradient(top, rgba(110,190,225,1) 0%, rgba(68,121,235,1) 100%);
background: linear-gradient(to bottom, rgba(110,190,225,1) 0%, rgba(68,121,235,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ebee1', endColorstr='#4479eb', GradientType=0 ); transition: all 0.4s;}
.login button:focus { outline: none;}
.login button span { margin: 2px; float: left; width: 136px; height: 36px;background: rgba(76,135,247,1); line-height: 36px;
background: -moz-linear-gradient(left, rgba(76,135,247,1) 0%, rgba(100,177,214,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(76,135,247,1)), color-stop(100%, rgba(100,177,214,1)));
background: -webkit-linear-gradient(left, rgba(76,135,247,1) 0%, rgba(100,177,214,1) 100%);
background: -o-linear-gradient(left, rgba(76,135,247,1) 0%, rgba(100,177,214,1) 100%);
background: -ms-linear-gradient(left, rgba(76,135,247,1) 0%, rgba(100,177,214,1) 100%);
background: linear-gradient(to right, rgba(76,135,247,1) 0%, rgba(100,177,214,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c87f7', endColorstr='#64b1d6', GradientType=1 );}
.login button:hover {-webkit-box-shadow: 0px 0px 30px 2px rgba(78, 138, 245, 0.75);
-moz-box-shadow: 0px 0px 30px 2px rgba(78, 138, 245, 0.75);
box-shadow: 0px 0px 30px 2px rgba(78, 138, 245, 0.75);}
/* ----------------------- */
.clock_bottom_3,
.clock_bottom_2,
.clock_bottom_1 {transition: transform 0.3s; opacity: 0;}
svg:hover .clock_bottom_3 {transform: translate(72px, 320px); }
svg:hover .clock_bottom_2 {transform: translate(72px, 298px); }
svg:hover .clock_bottom_1 {transform: translate(72px, 280px);}
.clock_bottom_3 {transform: translate(72px, 365px); animation: clock_bottom_3 0.5s linear; animation-fill-mode: forwards;}
.clock_bottom_2 {transform: translate(72px, 348px); animation: clock_bottom_2 0.5s linear; animation-fill-mode: forwards;}
.clock_bottom_1 {transform: translate(72px, 320px); animation: clock_bottom_1 0.5s linear; animation-fill-mode: forwards;}
.shown .clock_bottom_1 { animation: none; transform: translate(72px, 277px); opacity: 1; transition: all 0.6s;}
.shown .clock_bottom_2 { animation: none; transform: translate(72px, 291px); opacity: 1; transition: all 0.6s;}
.shown .clock_bottom_3 { animation: none; transform: translate(72px, 306px); opacity: 1; transition: all 0.6s;}
@keyframes clock_bottom_3 {
to {transform: translate(72px, 306px); opacity: 1;transition: transform 0.3s;}
}
@keyframes clock_bottom_2 {
to {transform: translate(72px, 291px); opacity: 1;}
}
@keyframes clock_bottom_1 {
to {transform: translate(72px, 277px); opacity: 1;}
}
/* when you press button */
.logining .clock_bottom_3 {transform: translate(72px, 354px); opacity: 0;}
.logining .clock_bottom_2 {transform: translate(72px, 329px); opacity: 0;}
.logining .clock_bottom_1 {transform: translate(72px, 300px); opacity: 0;}
jsfiddle：https://jsfiddle.net/fpfmxawv/2/