Question

我正在尝试在具有border-radius的元素上实现缩放动画，但它在webkit上以别名渲染结束。

HTML：

<ul>
    <li style="transform: rotate(0deg) translateY(-35vh);">
        <span></span>
    </li>
    <li style="transform: rotate(20deg) translateY(-35vh);">
        <span></span>
    </li>
<ul>

CSS：

li{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    list-style: none;
    border-radius: 50%;
    backgroud-color: red;
    -webkit-backface-visibility: hidden;
}

span{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: black;
}

li span.scaleup{
    animation: scaleup 2s 1;
}

@keyframes scaleup{
    10%{
        transform: scale(12);
    }
    100%{ 
        transform: scale(1);
    }
}

不确定我是否做错了，或者它是否是一个webkit错误。

这是我的代码：http://codepen.io/pixelpirate/pen/gpqpQV

Answer 1

正在发生的事情是浏览器以非常小的尺寸渲染，然后将其作为位图处理到硬件合成以进行缩放。所以你要扩大5px版本，从而达到你所看到的效果。

你可以通过相反的方式解决这个问题 - 从大尺寸渲染开始......

li{
    width: 60px;
    height: 60px;

缩小......

  <li style="transform: rotate(0deg) translateY(-35vh) scale(calc(1/12));">
    <span></span>
  </li>
  <li style="transform: rotate(20deg) translateY(-35vh) scale(calc(1/12));">
    <span></span>
  </li>

以下是整个代码 - 您可以通过单击下面的“运行代码段”来内联运行它。更新了代码集：http://codepen.io/anon/pen/bdzEEv

$('button').click(function(){
  
    $('span').addClass('scaleup').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function (e){
    	$(this).removeClass();
	});
});

body{
  background: white;
}
button{
  margin: 40px auto;
  display: block;
  width: 150px;
  height: 35px;
}
ul{
  position: relative;
  border-radius: 50%;
  width: 70vh;
  height: 70vh;
  margin-top: 15vh;
  margin-left: calc(50vw - (70vh)/2);
  padding: 0;
}

li{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: red;
    list-style: none;
    -webkit-backface-visibility: hidden;
}
span{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: black;
}
li span.scaleup{
	animation: scaleup 2s 1;
}

@keyframes scaleup{
  10%{
  	transform: scale(12);
  }
  100%{ 
  	transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle</button>
<ul>
  <li style="transform: rotate(0deg) translateY(-35vh) scale(calc(1/12));">
    <span></span>
  </li>
  <li style="transform: rotate(20deg) translateY(-35vh) scale(calc(1/12));">
    <span></span>
  </li>
<ul>

使用动画时，Webkit在边界半径上渲染bug

1 个答案: