Keyframe CSS animation overwrites hover transition -

i afraid there similar questions didn’t found concrete solution, created fiddle:

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 overwriten 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; }    

in (simplified) animation works fine except when mouse leaves entire box. animation starts original state, abruptly. basic transition time (and ease) ignored because seems keyframes have higher importance , overwrite it.

what need keyframe animation triggering , when mouse leaves should turn original state smoothly.

is there solution 1) in pure css 2) maybe little javascript only?

thanks in advance , ideas!

edit:

after implementing solution offered kindly toni correct fiddle:

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

thanks again toni!

edit 2:

sadly, yet, there 1 question left. part keyframes not executed on firefox though added -moz- vendors, too, in fiddle:

http://jsfiddle.net/dr6ld0wl/1/

why?

ps: far tested works in opera (beta). browser resisting firefox

edit 3: correct (working) code in fiddle:

http://jsfiddle.net/dr6ld0wl/16/

the keyframes need explicitly divided in vendor prefixes. jesus christ. prefixes…

here jsfiddle achieves this.

.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) */ } 

the animation out assigned in css in main class, hover state kicks in on hover , css re-applies original class properties on unhover.

the animation trigger backwards on page load, might think of tweaking animation take account, this example, pinched this answer. alternatively, use javascript (or jquery), this example animations triggered adding , removing classes target using 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; } 

also, i'd use @keyframe or transition. use transition if need simple change n m when things more complex, such 1 thing changing evenly on 100% thing not starting until 50% off animation has played, use @keyframe

using both cause confusion, if you're trying animate same properties.

finally css vendor prefixes required