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.
<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
Post a Comment