javascript - IE Fallback for Hover animation -


i trying put fallback in internet explorer hovering on element.

in chrome, element pops , looks neat not in ie :(

currently there time delay before background colour appears.

i'm guessing -webkit-animation-name root of issue.

http://jsfiddle.net/8j249sre/

<div class="effects">     <a class="hvr-pop" href="#">pop</a> </div>   /* pop */ @-webkit-keyframes hvr-pop {   50% {     -webkit-transform: scale(1.2);     transform: scale(1.2);   } }  @keyframes hvr-pop {   50% {     -webkit-transform: scale(1.2);     transform: scale(1.2);   } }  .hvr-pop {   display: inline-block;   vertical-align: middle;   -webkit-transform: translatez(0);   transform: translatez(0);   box-shadow: 0 0 1px rgba(0, 0, 0, 0);   -webkit-backface-visibility: hidden;   backface-visibility: hidden;   -moz-osx-font-smoothing: grayscale; } .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {   -webkit-animation-name: hvr-pop;   animation-name: hvr-pop;   -webkit-animation-duration: 0.3s;   animation-duration: 0.3s;   -webkit-animation-timing-function: linear;   animation-timing-function: linear;   -webkit-animation-iteration-count: 1;   animation-iteration-count: 1; } 

adding .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { resolved issue :-)

-ms-animation-name:none;


Comments

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

matplotlib support failed in PyCharm on OSX -

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -