html - A CSS property which have been used for animation can't be used for hover in chrome -

if use css property css animation, , if use property hovering effect well, in google chrome, hovering won't work.

here's animation code :

@keyframes fadeinupbig {   0% {     -webkit-transform: translatey(2000px);     -ms-transform: translatey(2000px);     transform: translatey(2000px);   }    100% {     -webkit-transform: translatey(0);     -ms-transform: translatey(0);     transform: translatey(0);   } }  .fadeinupbig {   -webkit-animation-name: fadeinupbig;   animation-name: fadeinupbig; }  @-webkit-keyframes fadeout {   0% {     opacity: 1;   }    100% {     opacity: 0;   } } 

here's hover code :

.simg:hover{     opacity: 1 !important;     @include scale(1.2); } 

a working demo (the 5 round images @ bottom should scale on hover.) : http://secret-temple-3539.herokuapp.com/

add transform container div instead of img tag shown below , should work according expectation.

.simgcont:hover {     opacity: 1 !important;     -webkit-transform: scale(1.2); /* older versions, add other browser prefixes need */     transform: scale(1.2); } 

alternately, can make a block (using display: block) , add transform it. (least preferred option)

add transition either div or a make transformation smoother.

i don't think chrome (webkit) supports scaling of non-block elements (edit: mentioned here).

edit 2: should have mentioned above answer 1 possible solution problem had mentioned in comments.

for original question, problem seems -webkit-animation-fill-mode property. value both seems causing problem when both animated , fadeinupbig classes used together. can see in fiddle when value changed backwards works fine. ( forwards doesn't work)

edit 3: simpler fiddle may understand. in this, see have applied 2 transformations (one through initial animation , 1 on hover) , find ones fill mode forwards/both not perform transformation on hover while 1 backwards does.

the explanation have because both forwards , both makes div hold final state transformed 1 , hence 1 on top of not being taken. backwards mode restores div original position before/without transformation (which 0px) , hence able accept transformation specified on hover.

possible reason that, in css, element 1 transformation property can specified/present @ same time (try giving 2 different -webkit-transform lines within same class , see 1 take effect) , hence when try apply new transformation element holding transformed state, not working.

note: not definitive answer, leaving here because analysis might in future.