jquery - Border Radius Animation -

i building site on squarespace , trying border radius of first page change while scrolling. animation works in squarespace preview if go on computer or in incognito mode on chrome doesn't work. border radius isn't changed remains flat. there conflicting in code?

css:

#intro{   border-top-left-radius: 0% !important;   border-top-right-radius: 0% !important;   width: 150vw;   overflow: hidden;   right: 26vw;   height: 800px; }  

jquery:

<script> var hheight = $("html").height(),     radius  = 100;  $(window).scroll(function() {   var scrolltop = $(window).scrolltop(),       percent   = 150 - ((150*scrolltop)/hheight) * 2;   $("#intro").css("border-radius", percent + "%"); }); </script>  

why don't use transition style?

#main {    background: white;    height: 20px;    width: 20px;    border: 1px solid black;    transition: border-radius ease 0.5s;  }  #main:hover {    border-radius: 22px;  }

<div id="main"> </div>

and if want bind scroll(e.g. mousewheel) event(for reason not works in firefox):

var px = 4;  $(document).ready(function(){      $('#main').bind('mousewheel', function(e) {          if(e.originalevent.wheeldelta /120 > 0) {              px = px +1;          }          else{          	px = px -1;          }          $("#main").css("border-radius", px + "px");      });  });

#main {    background: white;    height: 20px;    width: 20px;    border: 1px solid black;    transition: border-radius ease 0.5s;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="main"></div>

wiki