CSS 面具显示元素

Question

我必须在蒙版动画中显示一个元素，我创建了两种不同的方法来完成此操作。然而，我不确定如何确定哪一个会更有效率。最终目标是在移动设备上使用动画，因此效率很重要。

方法一 - 在两个不同的 div 元素上使用 transform:translate()。同时为两个 div 元素设置动画以实现遮罩显示

HTML

<div class="container">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget auctor dui, ut maximus odio. Nam aliquam, ex eu posuere iaculis, erat eros tempus metus, gravida semper magna risus id elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse placerat dolor sit amet risus pretium, quis semper augue scelerisque. Integer id luctus sapien. Aenean sodales lorem id mi elementum lacinia. Nam pretium risus sed ipsum molestie mattis. Curabitur et risus et ligula malesuada gravida vitae eget ex. Suspendisse augue quam, feugiat vel est vitae, euismod pretium lacus. Etiam vitae ultrices sapien, ac viverra lorem. Donec at sodales est, sed laoreet ante.
    </div>
</div>

CSS

.container {
    width: 300px;
    height: 300px;
    transform: translate(-100%,-100%);
    -webkit-animation: reveal 5s forwards;
    overflow: hidden;
}

.content {
    width: 300px;
    height: 300px;
    transform: translate(100%,100%);
    -webkit-animation: reveal 5s forwards;
    background: red;
}


@-webkit-keyframes reveal {
    100% { transform: translate(0,0) }
}

Fiddle: http://jsfiddle.net/murtw32u/

方法二 - 动画化父级的宽度和高度div

HTML

<div class="container2">
    <div class="content2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget auctor dui, ut maximus odio. Nam aliquam, ex eu posuere iaculis, erat eros tempus metus, gravida semper magna risus id elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse placerat dolor sit amet risus pretium, quis semper augue scelerisque. Integer id luctus sapien. Aenean sodales lorem id mi elementum lacinia. Nam pretium risus sed ipsum molestie mattis. Curabitur et risus et ligula malesuada gravida vitae eget ex. Suspendisse augue quam, feugiat vel est vitae, euismod pretium lacus. Etiam vitae ultrices sapien, ac viverra lorem. Donec at sodales est, sed laoreet ante.
    </div>
</div>

CSS

.container2 {
    width: 0;
    height: 0;
    -webkit-animation: reveal2 5s forwards;
    overflow: hidden;
}

.content2 {
    width: 300px;
    height: 300px;
    background: red;
}


@-webkit-keyframes reveal2 {
    100% { width: 300px; height: 300px; }
}

Fiddle: http://jsfiddle.net/2d2w7j99/

这两种方法显然都有效，但我正在寻找有关浏览器如何呈现它们的任何见解。方法一，动画两个 divs，但只动画一个 css 属性（转换）。方法二，对一个 div 进行动画处理，但对两个 css 属性（宽度、高度）进行动画处理。我不知道如何着手找出哪种方式会更快。

Answer 1

最好使用利用硬件加速的 CSS 属性。 translate 和 transform 是大多数浏览器中的硬件加速 CSS 属性。

但是对于任何 CSS 最终产品都将通过人眼和各种设备进行判断，因此您需要掌握那些真实的设备，将它们拿在手中并进行游戏。判断jank https://www.youtube.com/watch?v=n8ep4leoN9A

您还可以考虑在 Chrome 开发工具 (https://developer.chrome.com/devtools/docs/rendering-settings) 中打开 Show paint rectangles 以查看您的动画导致了多少 DOM 重绘.适当地固定大小和清除元素可以阻止连锁反应并为您的浏览器节省大量工作。

CSS 面具显示元素

CSS Mask Reveal Element

css

css-transitions