CSS Mask Reveal Element

Question

У меня должен быть обнаружен элемент в анимации с маской, и для этого я создал два разных метода. Я не уверен, как определить, какой из них будет более эффективным. Конечная цель заключается в том, что анимации будут использоваться на мобильном устройстве, поэтому эффективность важна.

Метод 1 - Используйте transform: translate() на двух разных элементах div. Анимации оба элемента 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/

Оба метода работают, очевидно, но я ищу любые идеи о том, как браузеры отображают их. Первый метод, оживляет два div, но только анимирует одно свойство css (преобразование). Второй метод, анимация одного div, но анимация двух свойств css (ширина, высота). Я не знаю, как выяснить, какой путь будет быстрее.

Answer 1

Всегда лучше использовать свойства CSS, которые используют аппаратное ускорение. translate и transform - это CSS-свойства с аппаратным ускорением в большинстве браузеров.

Но с любым CSS конечный продукт будет оцениваться человеческим глазом и на различных устройствах, поэтому вам нужно овладеть этими реальными устройствами, держать их в руках и играть. Сделать суждение Jank https://www.youtube.com/watch?v=n8ep4leoN9A

Вы можете также думать о включении Show paint rectangles в Chrome Дев инструментов (https://developer.chrome.com/devtools/docs/rendering-settings), чтобы увидеть, как много малярные в DOM ваши анимации вызывает. Фиксирующие размеры и очищающие элементы должным образом могут остановить эффект детонации и сохранить работу вашего браузера.