將CSS懸停動畫轉換爲自動動畫

Question

我寫代碼閃耀我的網站標誌。它將鼠標懸停在徽標上時可以工作，但我希望在加載網站時動畫會自動播放。我使用關鍵幀但不工作，我很困惑。

我的CSS代碼：

@import url(https://fonts.googleapis.com/css?family=Raleway); 
 
html{ 
 
    font: .9em 'Raleway',sans-serif; 
 
    height: 100%; 
 
    text-align: center; 
 
    background: radial-gradient(50% 0,rgba(255,255,255,.3),rgba(255,255,255,0)), deepskyblue; 
 
    color: rgba(0,0,0,.6); 
 
} 
 
p a{ 
 
    color: rgba(0,0,0,.6); 
 
} 
 
.mask a{ 
 
    position: relative; 
 
    display:block; 
 
    width:150px; 
 
    height: 64px; 
 
    text-align:center; 
 
    margin: 50px auto; 
 
    background: ; 
 
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5)); 
 
} 
 
.mask a{ 
 
    background-position: -140px 0; 
 
    
 
} 
 
.mask a:hover, 
 
.mask a:focus{ 
 
    background-position: 10px 0; 
 
    /*change speed to see in slow motion*/ 
 
    transition: all 1s; 
 
} 
 
.mask a::after{ 
 
    content:''; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    top:0; left:0; right:0; bottom: 0; 
 
    background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat; 
 
    background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat; 
 
    background-position: inherit; 
 
    -webkit-mask: url('http://dev.iamvdo.me/newLogoCSS3create2.png') center; 
 
    mask: url('#mask-firefox'); 
 
}

<div class="mask pseudo"> 
 
    <a href="http://css3create.com"> 
 
    <img src="http://dev.iamvdo.me/newLogoCSS3create2.png" alt="CSS3Create logo" /> 
 
    </a> 
 
</div> 
 

 

 
<svg height="0"> 
 
    <!-- THE mask --> 
 
    <mask id="mask-firefox"> 
 
    <image width="150" height="64" xlink:href="http://dev.iamvdo.me/newLogoCSS3create2.png" filter="url(#filter)" /> 
 
    </mask> 
 
    
 
    <!-- the filter to make the image white --> 
 
    <filter id="filter"> 
 
    <feFlood flood-color="white" /> 
 
    <feComposite in2="SourceAlpha" operator="in" /> 
 
    </filter> 
 
</svg>

Answer 1

請看看下面這個例子，它聲明瞭一個名爲shineFx動畫與迭代計數的不定式。

.mask a{ 
    position: relative; 
    display:block; 
    width:150px; 
    height: 64px; 
    text-align:center; 
    margin: 50px auto; 
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5)); 
    animation-name: shineFx; 
    animation-duration: 3s; 
    animation-timing-function: ease-out; 
    animation-iteration-count: infinite; 
} 


@keyframes shineFx { 
    from {background-position: -140px 0px;} 
    to {background-position: 10px 0;} 
}