i trying pause animation(which css transformy) state on hover hover not evenly detected accross transform range(i observed detected in initial range , after transform ends) code(i simplified minimum posting) :
<html> <head> <style> .member{ height:50px; width:50px; margin:30px; border-radius:50%; border:1px solid #aaaaaa; background-color:black; transition:all 0.3s ease; -moz-animation-name: dropheader; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in; -moz-animation-duration: 6s; -webkit-animation-name: dropheader; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 6s; animation-name: dropheader; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 6s; } @-moz-keyframes dropheader { 0% { -moz-transform: translatex(200px); } 100% { -moz-transform: translatey(0); } } @-webkit-keyframes dropheader { 0% { -webkit-transform: translatex(200px); } 100% { -webkit-transform: translatex(0); } } @keyframes dropheader { 0% { transform: translatex(200px); } 100% { transform: translatex(0); } } .member:hover{ border:3px solid #ffffff; box-shadow: 0px 0px 0px 3px #7ec0ee; -webkit-animation-play-state: paused; } </style> </head> <body> <div class="member"> </div> </body> </html>
okay, here thing, couldn't figure out exact reason these things tried , failed , succeeded (in order) :
1. removing -webkit
2. using jquery mouseover , mouseout integrated css animationstates "running" , pause.
3. then, observed after 1 hover if click multiple times somewhere else on webapage , hover, worked! gave me hint direction of introducing multiple such divs , totally works fine now.
Comments
Post a Comment