CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-transitions
vlk
vlk

Reputation: 1454

Prevent blurred border on transition transform scale

I'm working on a navbar animation. On click on the navbar button the red round div get a scale transition to cover all the page. The problem is the bad blurred effect I have on the border while it's scaling up. I've try to use backface-visibility: hidden and translateZ(0) to fix it but it seem not solve the problem. To show you better what I mean I set the transition time to 5s. I'm using chrome.

$(".navbar_button").click( function(){
  if ($(this).hasClass("clicked")){
    $(this).removeClass("clicked");
    $("#bar1,#bar2,#bar2b,#bar3,.round_nav,.round_nav2").removeClass("open");
 

    
  }
  
  else {
    $(this).addClass("clicked");
    $("#bar1,#bar2,#bar2b,#bar3,.round_nav,.round_nav2").addClass("open");
  
    
  }
});
@import url('https://fonts.googleapis.com/css?family=Crimson+Text');

body{
  margin:0px;
  overflow: hidden;
}

.container{
  height:100vh;
  width:100%;
  background-color:#EEE9E9;
  overflow: hidden;
}

.navbar_button{
  width:30px;
  height:25px;
  position:absolute;
  top: 40px;
  right: 40px;
}

.bar{
  position:absolute;
  width:100%;
  height:3px;
  -webkit-border-radius: 12px; 
  -moz-border-radius: 12px; 
  border-radius: 12px; 
  background-color:white;
  cursor: pointer;
  display: block;
  margin: 0;
   -webkit-transition: .5s;
  transition: .5s;
}

#bar1{
  top:0%;
  left:0%;
}

#bar1.open{
  -webkit-transform: scaleX(0);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2{
  top:calc(50% - 4px);
  -webkit-transform: rotate(0deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2.open{
  -webkit-transform: rotate(45deg);
  -webkit-transition:  .5s;
  transition: .5s;
}

#bar2b{
  top:calc(50% - 4px);
  -webkit-transform: rotate(0deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2b.open{
  -webkit-transform: rotate(-45deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar3{
  top:calc(100% - 8px);
  right:0%;
}

#bar3.open{
  -webkit-transform: scaleX(0);
  -webkit-transition: .5s;
  transition: .5s;
}

.round_nav{
  width:50px;
  height:50px;
  background-color: #FF4040;
  position:fixed;
  top:0px;
  right:0px;
  margin-top:25px;
  margin-right:30px;
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%; 
  -webkit-transition:  .5s;
  transition: .5s;
  overflow: hidden;
  
}

.round_nav.open{
  transform: scale(60);
  -webkit-transition: 5s;
  transition: 5s;
  
}



.navbar_button:hover .round_nav{
  transform: translateZ(0);
  -webkit-transform: scale(1.1);
  
  
}

.round_nav2.open{
  width:5000px;
  height:5000px;
  opacity:0;
  margin-top:-2500px;
  margin-right:-2500px;
  -webkit-transition: all 1s ease;
  transition: all 2s ease;
  transition-delay:.1s;
  -webkit-transition-delay:.1s;
}

.nav_content{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding-left:20px;
  margin:0px;
  width:120px;
  height: 200px;
  -webkit-transition: .2s;
  transition: .2s;
  
}

.nav_content li{
  color: #EEE9E9;
  font-size: 30px;
  font-family: 'Crimson Text';
  margin-bottom: 10px;
  letter-spacing: 2px;
  cursor: pointer;
  text-align: center;
  -webkit-transition: .3s;
  transition: .3s ;
}

.nav_content ul{
  list-style-type:none;
  margin-left:10px !important;
  margin-top:0px;
  margin-bottom:0px;
  padding:0px;
  position:absolute;
  left:2%;
  top:0px;
  -webkit-transition: .6s;
  transition: .6s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="round_nav2">
      
  </div>
  
  <div class="round_nav">
      
  </div>
  
  <div class="navbar_button">
    <span id="bar1" class="bar"></span>
    <span id="bar2" class="bar"></span>
    <span id="bar2b" class="bar"></span>
    <span id="bar3" class="bar"></span>
  </div>
</div>

Upvotes: 2

Views: 2628

Answers (1)

Asons
Asons

Reputation: 87191

The problem here is that you scale a 50px wide element 60 times, hence getting jugged edges.

Do it the other way around, where you set its default size to 3000px and scaled to 0.0167, and then on click, scale it to 1.

Since your CSS is a little messy I just show the 2 main rules, though you might need to adjust a few more properties.

.round_nav{
  width:3000px;
  height:3000px;
  transform: scale(0.0167);
  transform-origin: right top;
  ...
}

.round_nav.open{
  transform: scale(1);
  ...
}

Upvotes: 2

Related Questions