CSS3 transform: rotate on hover

Question

У меня есть хорошая анимация, поэтому у меня есть пуля, снимающая звезду, которая затем вращает все после того, как вы наведите курсор на пистолет. Все работает так, как должно, но .......

После того, как вы отталкиваете мышь от пушки, звезда вращается в другую сторону, Не хорошо :(какие-нибудь идеи, как заставить ее остановиться?

Вместо этого я попытался использовать «активный», но это не работает с анимация.

CSS

#star { 
    width:48px; 
    height:49px; 
    position:absolute; 
    z-index:5; 
    left:922px; 
    top:63px; 
    -webkit-transition: all 4s ease-out; 
    -moz-transition: all 4s ease-out; 
    -o-transition: all 4s ease-out; 
    -ms-transition: all 4s ease-out; 
    transition: all 4s ease-out; 
} 

#gun:hover ~ #star { 
    -webkit-transform:rotateZ(340deg); 
    -moz-transform:rotateZ(340deg); 
    -o-transform:rotateZ(340deg); 
    -ms-transform:rotateZ(340deg); 
    transform:rotateZ(340deg); 
    -webkit-transition-delay: 1s; 
    -moz-transition-delay: 1s; 
    -o-transition-delay: 1s; 
    -ms-transition-delay: 1s; 
    transition-delay: 1 
} 

Answer 1

Характер селектора css :hover заключается в том, что он применяется только при наведении на элемент источника. Таким образом, обратное срабатывает, когда пользователь больше не зависает, потому что :hover больше не применяется. Существует два способа достичь того, чего вы хотите:

1. Используйте анимацию вместо этого. Анимации имеют animation-fill-mode, который, когда установлен в forwards, заставляет элемент сохранять его вычисленные значения, установленные последним ключевым кадром, встречающимся во время выполнения. MDN has more info about it.

   Вот как вы могли бы сделать это в вашем CSS:

   #gun:hover ~ #star { 
       -webkit-animation: rotate 4s forwards; 
       animation: rotate 4s forwards; 
   } 
   @-webkit-keyframes rotate { 
       100% { 
        -webkit-transform: rotate(360deg); 
       } 
   } 
   @keyframes rotate { 
       100% { 
        transform: rotate(360deg); 
       } 
   } 
   

   Демо:http://jsfiddle.net/FPCMt/

2. Если вы не хотите использовать анимацию, вам нужно написать JavaScript. Используйте событие hover, потому что события не зависят от текущего состояния, такого как :hover. Вы также заметите, что я переместил transition-delay css в #star, так как он может применить к этому элементу все время бездействия. Я использовал JQuery для краткости:

   JavaScript:

   $('#gun').hover(function() { 
       $('#star').css('transform', 'rotateZ(340deg)'); 
   }); 
   

   CSS:

   #star { 
       width: 50px; 
       -webkit-transition: all 4s ease-out; 
       -moz-transition: all 4s ease-out; 
       -o-transition: all 4s ease-out; 
       -ms-transition: all 4s ease-out; 
       transition: all 4s ease-out; 
       -webkit-transition-delay: 1s; 
       -moz-transition-delay: 1s; 
       -o-transition-delay: 1s; 
       -ms-transition-delay: 1s; 
       transition-delay: 1 
   } 
   

   Демо:http://jsfiddle.net/FPCMt/4/

   --или--

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

   JavaScript:

   var gun = document.getElementById('gun'); 
   var star = document.getElementById('star'); 
   
   gun.onmouseover = function() { 
       star.className = 'shot'; 
   }; 
   

   CSS: (в добавление к CSS из примера JQuery)

   #star.shot { 
       -webkit-transform:rotateZ(340deg); 
       -moz-transform:rotateZ(340deg); 
       -o-transform:rotateZ(340deg); 
       -ms-transform:rotateZ(340deg); 
       transform:rotateZ(340deg); 
   } 
   

   Демонстрация:

Answer 2

Вы можете указать разные transition-delay для перехода от не зависающего состояния к зависанию и от зависания до не зависания. Очень большая задержка для последнего перехода, например.

#star { 
    /* 
    other styles here 
    */ 
    transition-delay: 9999s; 
} 

сделает переход видимым как «в одну сторону». Вот JSFiddle example.