與CSS懸停的SVG不透明動畫

我有SVG，它包含兩個環：內部和外部。我試圖創建一個動畫，其中svg懸停顯示內環即刻，並在300毫秒後外。與CSS懸停的SVG不透明動畫

我試過用keyframes動畫，但顯然我不能在父母被徘徊時觸發子元素動畫。見this pen。

2017-08-31 Selenir

問題是你在觸發<svg>元素本身的關鍵幀動畫，然後告訴其中的一個元素有一個延遲動畫。

您只能在正在動畫的元素上添加屬性，如animation-delay，所以我將動畫移至了<circle>元素。在這裏你去：

svg { 
 
    width: 202px; 
 
    height: 202px; 
 
} 
 

 
svg:hover circle { 
 
    animation: show-inner 1s; 
 
} 
 

 
svg circle.ring-outer { 
 
    animation-delay: 300ms; 
 
} 
 

 
@keyframes show-inner { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<svg viewbox="0 0 202 202" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="101" cy="101" r="100" stroke="#7b82c7" stroke-width="1" fill="none" class="ring-outer"/> 
 
    <circle cx="101" cy="101" r="76" stroke="#7b82c7" stroke-width="1" fill="none" class="ring-inner"/> 
 
</svg>

來源

2017-08-31 17:00:10

我完全忘了，我能狀態下訪問兒童元素，如'SVG：懸停circle'。還有一個問題：我可以刪除過渡效果以便讓圈子立即出現嗎？ – Selenir

@ Selenir不知道我理解你的後續問題。你的動畫設置爲1秒 - 你只是想做出來，所以沒有淡出動畫？ –

是的，我想通過使用'0％{opacity：1}'關鍵幀可能。感謝幫助！ – Selenir

與CSS懸停的SVG不透明動畫

回答

相關問題