トランジション変換スケールでぼやけた境界線を防ぐ

Question

私はnavbarアニメーションに取り組んでいます。 navbarボタンをクリックすると、赤い丸形のdivがすべてのページをカバーするように縮尺を変更します。問題は、スケールアップしている間にボーダーに及ぼすぼかし効果が悪いことです。私は背面の視認性を使用しようとしました：それを修正するために非表示とtranslateZ（0）が問題を解決しないようです。私が何を意味するかをより良く示すために、私は5秒に移行時間を設定します。私はクロムを使用しています。

$(".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>

Answer 1

ここでの問題は、あなたがそれ故にjuggedエッジを取得し、は50px広い要素60回をスケーリングということです。あなたのCSSは少し厄介なので

それをあなたがクリックで、その後3000pxにデフォルトのサイズを設定し、0.0167にスケーリング、および他の方法で回避し、実行し、私はちょうど2を表示1.

にそれを拡大主なルールですが、いくつかのプロパティを調整する必要があります。

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

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