html - Perspective 3D animation flickering in Firefox -


i'm trying create 3d css effect of door swinging opening , shutting. have codepen animation work it:

http://codepen.io/caleuanhopkins/pen/dslpv

here's css:

.frame--realistic {   perspective: 20em; }  .door { height: inherit; background: darksalmon; }  .frame { margin: .5em auto; border: solid 1em saddlebrown; width: 500px; height: 6.5em; }  .door--open { -webkit-transform-origin: 0 0 /*whatever y value wish*/; -moz-transform-origin: 0 0 /*whatever y value wish*/; -ms-transform-origin: 0 0 /*whatever y value wish*/; -o-transform-origin: 0 0 /*whatever y value wish*/; transform-origin: 0 0 /*whatever y value wish*/; -webkit-transform: rotatey(-45deg); -moz-transform: rotatey(-45deg); -ms-transform: rotatey(-45deg); -o-transform: rotatey(-45deg); transform: rotatey(-45deg); }  @-webkit-keyframes doorani {   {  -webkit-transform: rotatey(0deg);   }   {  -webkit-transform: rotatey(20deg);   } }   .frame:hover .door--ani { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -moz-animation: doorani 1s 1 normal forwards; -webkit-animation: doorani 1s 1 normal forwards; -ms-animation: doorani 1s 1 normal forwards; -o-animation: doorani 1s 1 normal forwards; animation: doorani 1s 1 normal forwards; }  @-webkit-keyframes doorout {   {  -webkit-transform: rotatey(20deg);   }   {  -webkit-transform: rotatey(0deg);   } }  @keyframes doorani {   {  -moz-transform: rotatey(0deg); -ms-transform: rotatey(0deg); -o-transform: rotatey(0deg); transform: rotatey(0deg);   }   {  -moz-transform: rotatey(20deg); -ms-transform: rotatey(20deg); -o-transform: rotatey(20deg); transform: rotatey(20deg);   } }  @keyframes doorout {   {  -moz-transform: rotatey(20deg); -ms-transform: rotatey(20deg); -o-transform: rotatey(20deg); transform: rotatey(20deg);   }   {  -moz-transform: rotatey(0deg); -ms-transform: rotatey(0deg); -o-transform: rotatey(0deg); transform: rotatey(0deg);   } }  .door--ani { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -moz-animation: doorout 1s 1 normal forwards; -webkit-animation: doorout 1s 1 normal forwards; -ms-animation: doorout 1s 1 normal forwards; -o-animation: doorout 1s 1 normal forwards; animation: doorout 1s 1 normal forwards; }

and html:

<div class='container'>   <div class='frame frame--realistic'>     <div class='door door--ani'> </div>   </div> </div>

however, main issue when door swings after have hovered on door. there slight flicker before animation finishes. have idea why doing , if there's can change/add fix issue?

update: code not running webkit browsers, have updated code issues of flickering still appears in firefox.


Comments

Post a Comment

Popular posts from this blog

php - Submit Form Data without Reloading page -

i know question has been asked , answered bunch of times life of me can not solution work on code. believe if redo code, work properly, , in retrospect time i've spent on issue should have redone code...but beyond deadline , have working prototype up... can advise how update multiple forms on single page without reloading page? horrible @ php , complete noob js/jquery/ajax @ best. html/php in single file , believe causing me problems/is largest obstacle @ getting ajax form processing work. basically, want users to: select teams multiple dropdowns in form group 1 (league champs) , on update update db newly selected team without reloadding page. edit team scores per match , on score submit/update, update db new scores. for each requirement there multiple forms (1 each leagues, 1 each per match) have set class on each form id. everything works via php, form submission reloads page each time submitted , not ideal. i have tried ajax code here http://scotch.io/tutoria...
Read more

linux - Rails running on virtual machine in Windows -

the reason why want switch ubuntu people said gems works better on linux on windows. i don't want macbook pro rails development since love windows , cannot stand lack of apps mac. moreover, people saying ubuntu "better" mac: http://www.reddit.com/r/ubuntu/comments/1bgj1s/are_there_advantages_of_ubuntu_over_os_x_for/ does virtual box work enough doesn't have lag @ all? using i7-3517u cpu 8gb memory. need program in environment lag-free , not sluggish. or there alternatives recommend? i unsure permission settings or complicated stuffs regarding terminal. i'll using terminal develop. i'm still quite new here development in linux. please kind me >< thanks. @holyxiaoxin pretty sure should asking on superuser instead. nevertheless, suggest install ubuntu in partition instead of running virtual machine. here's guide https://help.ubuntu.com/community/windowsdualboot also, yes. developing in virtual machine accurate, @ end experiment w...
Read more