html - Circle animation not centered on center -


i have little problem animation css of circle.

the center of animation not displayed correctly click.

the translation(-50%, -50%) works after animation.

here demo: https://plnkr.co/edit/0umwazgbmixwlu61ee2m

do have idea how deal that?

// code goes here    function printmousepos(event) {    var element = document.getelementbyid("body");    var para1 = document.createelement("div");    para1.classname = "circle";    para1.setattribute("style", "position : absolute;left:" + event.clientx + "px;top:" + event.clienty + "px");    element.appendchild(para1);    var para2 = document.createelement("div");    para2.classname = "point";    para2.setattribute("style", "position : absolute;left:" + event.clientx + "px;top:" + event.clienty + "px");      element.appendchild(para2);    console.log(event.clientx, event.clienty);  }    document.addeventlistener("click", printmousepos);
/* styles go here */    body {    position: relative;    height: 1000px;  }    @keyframes circle {    {      transform: scale(0, 0)    }    {      transform: scale(2, 2)    }  }    .circle {    color: blue;    width: 200px;    height: 200px;    border-style: solid;    border-width: 20px;    border-color: blue;    border-radius: 50%;    transform: translate(-50%, -50%);    animation-name: circle;    animation-duration: 1s;    animation-iteration-count: 3;    /*transform-origin: 0 0;*/  }    .point {    color: red;    border-style: solid;    border-width: 5px;    border-color: red;    border-radius: 50%;  }
<!doctype html>  <html>    <head>    <link rel="stylesheet" href="style.css">    <script src="script.js"></script>  </head>    <body id="body">    <h1>click everywhere</h1>  </body>    </html>

thanks!

your keyframes callout should this:

@keyframes circle {   {     transform: scale(0,0) translate(-50%, -50%);   }   {     transform: scale(2,2) translate(-50%, -50%);   } }

Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more