Keyframe CSS анимация перезаписывает парения переход

Question

Я боюсь, что подобные вопросы к этому, но я не нашел конкретного решения, поэтому я создал скрипку:

http://jsfiddle.net/Garavani/yrnjaf69/2/

<div class= "category_item"> 

    <div class= "cat_button"> 
     <span class="title_cat">TEXT</span> 
    </div> 

</div> 

CSS:

.category_item { 
    position: absolute; 
    background-color: #999; 
    top: 100px; 
    left: 50px; 
    width: 200px; 
    height: 200px; 
    /* seems to be overwriten by animation keyframes */ 
    -webkit-transition: -webkit-transform 0.215s ease-in-out; 
      transition: transform 0.215s ease-in-out; 
    cursor: pointer; 
} 

.category_item:hover { 
    -webkit-animation-name: easeBack; 
      animation-name: easeBack; 
    -webkit-animation-duration: 1s; 
      animation-duration: 1s; 
    -webkit-animation-fill-mode: forwards; 
      animation-fill-mode: forwards; 
} 

@-webkit-keyframes easeBack { 
    0% { 
     -webkit-transform: translateY(0); 
       transform: translateY(0); 
    } 
    50% { 
     -webkit-transform: translateY(-50px); 
       transform: translateY(-50px); 

    } 
    100% { 
     -webkit-transform: translateY(-30px); 
       transform: translateY(-30px); 
    } 
} 

.cat_button { 
    position: absolute; 
    width: 200px; 
    height: 55px; 
    bottom: 0; 
    border: 2px solid #fff; 
    color: #fff; 
    -webkit-transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out; 
    transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out; 
} 

.category_item:hover .cat_button { 
    background: #fff; 
    border-color: #fff; 
    color: #511c5b; 
} 

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

Что мне нужно - это запуск анимации ключевого кадра И когда мышь уходит, он должен вернуться в исходное состояние плавно.

Есть ли решение для этого 1) в чистом CSS 2) возможно, только с небольшим javascript?

Заранее благодарим за помощь и идеи!

EDIT:

После реализации решения, предлагаемое любезно Тони это правильная скрипка:

http://jsfiddle.net/yrnjaf69/40/

Еще раз спасибо Тони!

EDIT 2:

К сожалению, до сих пор, есть один вопрос. Часть с ключевыми кадрами, не выполняются на Firefox, хотя я добавил все -moz- продавцов тоже в этой скрипке:

http://jsfiddle.net/dr6Ld0wL/1/

Почему?

PS: Насколько я тестировал сейчас, он работает даже в Opera (Beta). Только браузер Firefox является сопротивление

EDIT 3: Правильный (рабочий) код теперь в этой скрипкой:

http://jsfiddle.net/dr6Ld0wL/16/

Ключевые кадры также должны быть четко разделены на префиксы. Иисус Христос. Эти префиксы ...

Answer 1

Вот jsfiddle, который достигает этого.

.demo-hover { 
    position: relative; 
    margin: 100px; 
    animation: complexProcessReversed 2s ease-in forwards; 
    width: 160px; 
    height: 160px; 
    background-color: #88d; 
} 
.demo-hover:hover { 
    animation: complexProcess 2s ease-in forwards; 
    width: 100px; 
    height: 100px; 
    background-color: #732; 
} 

@keyframes complexProcess { 
    /* keyframes */ 
} 

@keyframes complexProcessReversed { 
    /* keyframes (opposite) */ 
} 

Анимации из назначаются в CSS в главном классе, то состояние парения умирает при наведении курсора мыши и CSS повторно применяет оригинальные свойства класса на unhover.

Анимация запускается в обратном направлении при загрузке страницы, поэтому вам может потребоваться настроить вашу анимацию, чтобы принять это во внимание, например this example, зажато от this answer.В качестве альтернативы, использовать JavaScript (или JQuery), как this example где анимация срабатывает путем добавления и удаления классов к цели с помощью JQuery:

JavaScript

$('.demo-hover').hover(
    function() { 
     // mouse in 
     $(this).removeClass('forwards--reversed').addClass('forwards'); 
    },  
    function() { 
     // mouse out 
     $(this).removeClass('forwards').addClass('forwards--reversed'); 
    } 
); 

CSS

.forwards { 
    animation: complexProcess 2s ease-in forwards; 
    width: 100px; 
    height: 100px; 
    background-color: #732; 
} 

.forwards--reversed { 
    animation: complexProcessReversed 2s ease-in forwards; 
    width: 160px; 
    height: 160px; 
    background-color: #88d; 
} 

Кроме того, я 'd использовать @keyframeилиtransition. Используйте transition, если вам просто нужно простое изменение от n до m, но когда все сложнее, например, одна вещь меняется равномерно на 100%, а другая вещь не начинается до 50% от анимации, а затем используйте a @keyframe

Использование обоих способов приведет к путанице, особенно если вы пытаетесь анимировать те же свойства.

Наконец CSS префиксы необходимы