CSS Mask Reveal Element

I have to have an element be revealed in a masked animation, and I have created two different methods to accomplish this. I am unsure of how to determine which one is going to be more efficient however. The end goal is for the animations to be used on a mobile device, so efficiency is important.

Method One - Use transform:translate() on two different div elements. Animate both of the div elements simultaneously to achieve the masking reveal

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/

Method Two - animate the width and height of the parent 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/

Both methods work obviously but I am looking for any insights on how browsers render them. Method one, animates two divs, but is only animating one css property (transform). Method two, animates one div, but is animating two css properties (width, height). I do not know how to go about figure out which way is going to be faster.