鼠標關閉時的動畫返回

將鼠標懸停時，我將變換動畫應用於svg元素的不同部分：效果很好。但是，當我離開懸停區域時，我想以oppsoite方式擁有相同的動畫。我會怎麼做？這就是我目前的「動畫」：鼠標關閉時的動畫返回

.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"/>

來源

2017-10-11 Daiaiai

試試這個：

.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已經過渡。如果您只將此應用於懸停類，則在您移開鼠標時將其刪除，所以它不再流暢。

來源

2017-10-11 15:00:11

要小心「過渡：所有」的性能缺陷 - https://stackoverflow.com/a/8962837/1814486 –

正確，在我的答案中將'all'更改爲'transform'。 –

鼠標關閉時的動畫返回

回答

相關問題