大きなビューポートでcss3アニメーションピクセルを使用してサークルを拡大する

Question

サークルは半径10pxから100％まで拡大しています。円はビューポート全体の任意の位置に表示されます。アニメーションはモバイルでは問題なく表示されますが、大きなビューポートにはピクセルが表示されます。

ここでアニメーションがあります：https://rimildeyjsr.github.io/spotify-circle-animation/

任意のアイデアすべてのビューポート全体で一貫性のある円を維持する方法？

jQueryの

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
     function makeDiv(colorChoice){ 
      var divsize = 10; 
      var color = colorChoice; 
      console.log(color); 
      $newdiv = $('<div/>').css({ 
       'width':divsize+'px', 
       'height':divsize+'px', 
       'background-color': color 
      }); 

      var posx = (Math.random() * ($(document).width())).toFixed(); 
      var posy = (Math.random() * ($(document).height())).toFixed(); 
      $newdiv.css({ 
       'position':'absolute', 
       'left':posx+'px', 
       'top':posy+'px', 
       'border-radius':'50%', 
       'display':'none' 
      }).appendTo('body').addClass('animate').css({'display':'block'}).one(animationEnd,function(){ 
       $(this).remove(); 
      }); 
     }; 
     var id = setInterval(function(){makeDiv('black')},5000); 

CSS

html,body { 
    padding : 0; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    overflow-y: hidden; 
    overflow-x: hidden; 
} 

div { 
    height: 10px; 
    width:10px; 
    background-color: black; 
    border-radius: 50%; 
    top: 250px; 
    right: 10px; 
    left: 800px; 
} 

.animate { 
    -webkit-animation: expand 60s; 
} 

@-webkit-keyframes expand { 
    0%{ 
     -webkit-transform: scale(0,0); 
    } 

    100%{ 
     -webkit-transform: scale(100.0,100.0); 
     display: none; 
    } 
} 

Answer 1

ピクセル化されたエッジがtransform: scaleによって引き起こされます。 デフォルトで10×10ピクセルの円をそのサイズの100倍に伸ばします。

デフォルトサイズをできるだけ大きくしてから、最初に縮小してください。更新フィドルへ

リンク：

https://jsfiddle.net/Lreux3rx/2