与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不透明动画

回答

相关问题