1

I apply a transform-animation to different parts of a svg-element when hovering it: Works out great. But when I leave the hovered area, I want to have the same animation just in the oppsoite way. How would I do that? That is my current "animation":

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

And the svg-code therefore:

<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"/>
Daiaiai
  • 1,019
  • 3
  • 12
  • 28

1 Answers1

1

Try this:

.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 makes sure all transform css applied to the class is transitioned. If you only apply this to the hover class, it's removed when you move your mouse away, so it's not smooth anymore.

Rick
  • 1,172
  • 11
  • 25