小编Ale*_*rny的帖子

我正在用一个婴儿的动画脸做一些CSS动画,我正在尝试创建一个特定的微笑形状的嘴.我需要的形状看起来像这样.记下左上角和右上角,它们是圆形的:

你可以看到我最接近的地方.唯一缺少的是左上角和右上角.

.half-circle {
  height:150px;
  width: 75px;
  border-radius: 150px 0 0 150px;
  border-top: 20px solid #000;
  border-left: 20px solid #000;
  border-bottom: 20px solid #000;
  transform: translate(100px) rotate(-90deg);
}

<div class="half-circle"></div>

*编辑到目前为止提交的答案还不够好,所以我不幸地不得不使用位图.如果有人在将来找到更好的解决方案,请提供答案,如果工作正常,我会将其标记为已接受.

我是gsap的新手,所以如果我做了一些可怕的错误,那么请纠正我,但这是一个非常简单的例子.我只是想将css动画的性能与Firefox和Chrome中的gsap动画进行比较,以决定将来可能用于动画的动画.

基于我在各种网站上看到的例子,看起来gsap看起来一般表现更好,而且选择更少,但是对于这个简单的例子,这根本不是我所看到的,我会想到的东西像这样对于使用css和gsap动画的情况都是很常见的.

我知道这里引用的Firefox问题,你需要将旋转应用于动画或不使用子像素渲染,所以我在css动画和gsap动画中都应用了旋转来尝试修复急动在Firefox中.这确实有帮助,但是当你比较Firefox或Chrome中的两个动画时,gsap示例明显滞后.这两个动画并没有完全相同的缓和,但我认为它足够接近,可以正确比较它们.

Firefox gsap的性能仍然比Chrome差很多,但Chrome gsap仍然落后于每隔几个重复左右,而在Chrome中,css动画则没有.在我看来,Firefox css动画与Chrome gsap性能一样好.

这是codepen,所以你可以自己看看,注意要正确看到它你应该打开链接并展开你的窗口,它最适合至少1920x1080的分辨率:

http://codepen.io/apodworny/pen/dpkEQg

我做错了什么？是否有更多技巧来提高性能,例如Firefox轮换技巧？这只是greensock有问题吗？任何帮助或见解将不胜感激.

谢谢!

相关的HTML,CSS和JS:

HTML:

<div id="site-wrapper">
  <div class="css-animations">
    <div class="square">css</div>
    <div class="circle">css</div>
  </div>
  <div class="gsap-animations">
    <div class="gsap-square">gsap</div>
    <div class="gsap-circle">gsap</div>
  </div>
</div>

CSS:

@keyframes pulse {
    0%, 100% {
        transform: translate(100px, 0) rotate(0.01deg);
    }
    50% {
        transform: translate(1500px) rotate(0.01deg);
    }
}

@keyframes circle-pulse {
    0%, 100% {
        transform: translate(100px, 0) rotate(0.01deg);
    }
    50% {
        transform: translate(1500px) rotate(0.01deg);
    }
}

JS:

$( document ).ready(function() {
    var tl = new TimelineMax({ …