懸停出

Question

沖銷關鍵幀動畫這裏有一個演示：

http://codepen.io/Tiger0915/pen/GgjVLN

我有一個keyframe動畫在.circle股利hover。當您將鼠標懸停在上面時，它可以正常工作。

@include keyframes(bounce-bulge) { 
    0% { 
    transform: scale(1); 
    } 
    20% { 
    transform: scale(.75); 
    } 
    80% { 
    transform: scale(1.75); 
    } 
    100% { 
    transform: scale(1.5); 
    } 
} 


.circle { 
    transition: all 300ms ease; 

    &:hover { 
    @include animation(bounce-bulge 500ms forwards); 
    } 
} 

我想在每次停止懸停在元素上時反轉keyframe的效果。

這是可能的只是CSS？

Answer 1

看我的例子，如果這是正確的，你想要什麼（有人會創造更好的解決方案）

http://codepen.io/Mardzis/pen/YPGmmq

CSS（SASS）：

@include keyframes(bounce-bulge) { 
    0% { 
    transform: scale(1); 
    } 
    20% { 
    transform: scale(.75); 
    } 
    80% { 
    transform: scale(1.75); 
    } 
    100% { 
    transform: scale(1.5); 
    } 
} 

@include keyframes(bounce-bulge-back) { 
    100% { 
    transform: scale(1); 
    } 
    80% { 
    transform: scale(.75); 
    } 
    20% { 
    transform: scale(1.75); 
    } 
    0% { 
    transform: scale(1.5); 
    } 
} 


.circle { 
    margin: 100px auto 0; 
    width: 30px; 
    height: 30px; 

    border: 10px solid blue; 
    border-radius: 50%; 
    background: lightblue; 
    cursor: pointer; 

    transition: all 300ms ease; 
    @include animation(bounce-bulge-back 500ms forwards); 

    &:hover { 
    @include animation(bounce-bulge 500ms forwards); 
    } 
}