Css 动画在safari浏览器中第二次触发

我有以下动画： 加载页面时，将触发动画以显示3个椭圆。当您将鼠标悬停在svg元素上时，还可以播放动画。若你们点击按钮，也会有动画

除了Safari浏览器，它在任何地方都很好。加载页面时播放2次。这是因为添加了显示的类和转换属性

你知道怎么解决这个问题吗

<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;}

函数func（）{
document.getElementsByClassName（'container'）[0].classList.add（“显示”）；
}
设置超时（func，1000）；
登录页面
.svg{位置：绝对；宽度：920px；左侧：50%；左边距：-460px；顶部填充：70px；文本对齐：中间；}
.login{font:normal 12px/200%Arial；颜色：#929bbd；文本对齐：居中；顶部填充：30px；}
.text_块{位置：绝对；文本对齐：中心；宽度：100%；边距顶部：30px；过渡：全部0.4s；动画：超时0.4s线性；动画延迟：1.3s；动画填充模式：向前；}
.登录按钮{宽度：140px；高度：40px；边框：无；光标：指针；边框半径：4px；颜色：#fff；文本转换：大写；字体：普通12px Arial；边框顶部：50px；背景：rgba（110190225,1）；
背景：-moz线性梯度（顶部，rgba（110190225,1）0%，rgba（68121235,1）100%）；
背景：-webkit渐变（左上、左下、颜色停止（0%，rgba（110190225,1））、颜色停止（100%，rgba（68121235,1））；
背景：webkit线性梯度（顶部，rgba（110190225,1）0%，rgba（68121235,1）100%）；
背景：-o-线性梯度（顶部，rgba（110190225,1）0%，rgba（68121235,1）100%）；
背景：-ms线性梯度（顶部，rgba（110190225,1）0%，rgba（68121235,1）100%）；
背景：线性梯度（至底部，rgba（110190225,1）0%，rgba（68121235,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#6ebee1'，endColorstr='#4479eb'，GradientType=0）；转换：全部0.4s；}
.login按钮：焦点{大纲：无；}
.登录按钮span{边距：2px；浮点：左；宽度：136px；高度：36px；背景：rgba（76135247,1）；行高：36px；
背景：moz线性梯度（左，rgba（76135247,1）0%，rgba（100177214,1）100%）；
背景：-webkit渐变（左上、右上、颜色停止（0%，rgba（76135247,1））、颜色停止（100%，rgba（100177214,1））；
背景：-webkit线性梯度（左侧，rgba（76135247,1）0%，rgba（100177214,1）100%）；
背景：-o-线性梯度（左，rgba（76135247,1）0%，rgba（100177214,1）100%）；
背景：-ms线性梯度（左侧，rgba（76135247,1）0%，rgba（100177214,1）100%）；
背景：线性梯度（向右，rgba（76135247,1）0%，rgba（100177214,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#4c87f7'，endColorstr='#64b1d6'，GradientType=1）；）
。登录按钮：悬停{-webkit框阴影：0px 0px 30px 2px rgba（78、138、245、0.75）；
-moz盒阴影：0px 0px 30px 2px rgba（78138245,0.75）；
盒子阴影：0px 0px 30px 2px rgba（78138245,0.75）；}
/* ----------------------- */
.clock_bottom_3，
.clock_bottom_2，
.clock_bottom_1{转换：转换0.3s；不透明度：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{变换：平移（72px，365px）；动画：clock_bottom_3 0.5s线性；动画填充模式：向前；}
.clock_bottom_2{变换：平移（72px，348px）；动画：clock_bottom_2 0.5s线性；动画填充模式：向前；}
.clock_bottom_1{变换：平移（72px，320px）；动画：clock_bottom_1 0.5s线性；动画填充模式：向前；}
.clock_bottom_1{动画：无；变换：平移（72px，277px）；不透明度：1；过渡：全部0.6s；}
.clock_bottom_2{动画：无；变换：平移（72px，291px）；不透明度：1；过渡：全部0.6s；}
.clock_bottom_3{动画：无；变换：平移（72px，306px）；不透明度：1；过渡：全部0.6s；}
@关键帧时钟\u底部\u 3{
到{转换：转换（72px，306px）；不透明度：1；转换：转换0.3s；}
}
@关键帧时钟\u底部\u 2{
到{transform:translate（72px，291px）；不透明度：1；}
}
@