Как сохранить статус анимации CSS3 при наведении?

Question

Я пытаюсь сохранить статус анимации CSS3, когда мышь оставила логотип. (Я хочу сохранить желтый цвет сверху), а затем снова наведите поворот на 180 °, когда снова наведите курсор (желтый снизу).

Я пробовал различную технику, но я не могу добиться успеха ... Пожалуйста, помогите мне?

<a href="#home" class="logo"><img alt="logo" src="http://beta.florianfrazao.fr/assets/logo.png" width="150" height="150" /></a> 

.logo img:hover { 
    -webkit-animation: logoAnimation 0.7s 1 forwards; 
    -moz-animation: logoAnimation 0.7s 1 forwards; 
    -o-animation: logoAnimation 0.7s 1 forwards; 
} 

@-webkit-keyframes logoAnimation { 
from { 
    -webkit-transform: rotate(1deg); 
} 
to { 
-webkit-transform: rotate(180deg); 
} 
} 

Это мой демо: https://jsfiddle.net/9krmpe34/

Спасибо,

Флориан

Answer 1

Для этого, к сожалению, вам необходимо использовать JavaScript, поскольку то, что вы пытаетесь выполнить, невозможно с помощью CSS. Попробуйте это:

var img=document.querySelector(".logo>img"), 
 
    rotate=180; 
 
img.addEventListener("mouseover",function(){ 
 
    this.style.transform="rotate("+rotate+"deg)"; 
 
},0); 
 
img.addEventListener("transitionend",function(){ 
 
    rotate+=180 
 
},0);

.logo>img{ 
 
    transition:transform .7s; 
 
}

<a href="#" class="logo"><img height="150" src="http://beta.florianfrazao.fr/assets/logo.png" width="150"></a>

Answer 2

Вы должны поддерживать 2 состояния для логотипа, которые вы можете сделать с помощью 2 классов и их изменения на mouseenter с помощью jQuery или javascript.

$(".logo").on("mouseenter", function(e){ 
    if($(this).hasClass("state1")) 
    { 
    $(this).removeClass("state1").addClass("state2"); 
    } 
    else 
    { 
    $(this).removeClass("state2").addClass("state1"); 
    } 
});//mouseenter