Question

我将鼠标悬停在svg-element的不同部分时应用了变换动画：效果很好。但是当我离开悬停的区域时，我希望以对抗的方式拥有相同的动画。我该怎么办？那是我目前的动画＆＃34;：

.sw_cta:hover #svg_spitze{
    transform:translateY(100px);
   transition: all 0.5s;

}
.sw_cta:hover #svg_strich{
   transform:scaleY(3.7);
   transition: all 0.5s;
    transition-delay: 0.3s;
}

因此svg代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="sw_cta" id="Capa_1" x="0px" y="0px" viewBox="0 0 32.634 32.634"xml:space="preserve">
<g>
    <path d="M16.317,32.634c-0.276,0-0.5-0.224-0.5-0.5V0.5c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5v31.634   C16.817,32.41,16.593,32.634,16.317,32.634z" fill="#191db8" id="svg_strich"/>
    <path d="M16.315,32.634L16.315,32.634c-0.133,0-0.26-0.053-0.354-0.146L3.428,19.951c-0.195-0.195-0.195-0.512,0-0.707   s0.512-0.195,0.707,0l12.179,12.183l12.184-12.183c0.195-0.195,0.512-0.195,0.707,0s0.195,0.512,0,0.707L16.668,32.487   C16.574,32.581,16.448,32.634,16.315,32.634z" fill="#f15a6f" id="svg_spitze"/>

Answer 1

试试这个：

.sw_cta #svg_spitze{
   transition: transform 0.5s;
}
.sw_cta:hover #svg_spitze{
   transform:translateY(100px);

}
.sw_cta #svg_strich{
   transition: transform 0.5s;
   transition-delay: 0.3s;
}
.sw_cta:hover #svg_strich{
   transform:scaleY(3.7);
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="sw_cta" id="Capa_1" x="0px" y="0px" viewBox="0 0 32.634 32.634"xml:space="preserve">
<g>
    <path d="M16.317,32.634c-0.276,0-0.5-0.224-0.5-0.5V0.5c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5v31.634   C16.817,32.41,16.593,32.634,16.317,32.634z" fill="#191db8" id="svg_strich"/>
    <path d="M16.315,32.634L16.315,32.634c-0.133,0-0.26-0.053-0.354-0.146L3.428,19.951c-0.195-0.195-0.195-0.512,0-0.707   s0.512-0.195,0.707,0l12.179,12.183l12.184-12.183c0.195-0.195,0.512-0.195,0.707,0s0.195,0.512,0,0.707L16.668,32.487   C16.574,32.581,16.448,32.634,16.315,32.634z" fill="#f15a6f" id="svg_spitze"/>

transition: transform确保应用于该类的所有变换css都已转换。如果你只将它应用于悬停类，那么当你移开鼠标时它会被移除，因此它不再平滑。

鼠标关闭时动画返回

1 个答案: