Using CSS transform without it taking up original space - css

Question

I want to use a CSS transform to animate a video to display on a page, but I want the video to push the content down as it animates in, instead of the default situation where the space of the video already exists within the UI.
I created a jsfiddle to show what I mean here: https://jsfiddle.net/njpatten/198sh5ec/2/
I prefer to only transform the element for performance reasons, but I've tried modifying height as well to get the desired effect, but the result is a bit jumpy, and also not as performant as I'd like.
.video {
transform-origin: 0 0;
transform: scale(0, 0);
transition: 0.2s;
height: 0;
&.open {
transform: scale(1, 1);
height: 100%;
}
}
Is there a 'hack' that I'm missing that could solve this issue? How do animators deal with the element taking up space when trying to animate in an element while still keeping things performant (and therefore only animating transforms and opacity).
Thanks in advance!

Answer 1

Unfortunately, transform isn't going to cut it. It can't affect the layout of the document, which is what you're trying to achieve with pushing the text copy down. That said, I would approach this by first making the iframe container set its own dimensions based on an aspect ratio. Your video is at 560x315 which calculated as a percentage is 56.25% as tall as it is wide. The percentage is needed because it can be used with the "padding trick" to get an element that scales according to aspect ratio. So the first part is to make your video container based on aspect ratio:
.video {
position: relative;
max-width: 560px;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:after {
content: '';
display: block;
padding-top: 56.25%;
}
}
As you'll notice you can now set the width of .video and it will always have the right height for the video. Next we need to add the transition. We'll be transitioning the padding-top property.
.video {
position: relative;
max-width: 560px;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:after {
content: '';
display: block;
padding-top: 0%;
transition: padding 0.2s;
}
&.open:after {
padding-top: 56.25%;
}
}
Lastly, you can add a transition to your video so it scales up instead of opens like a shade:
.video {
position: relative;
max-width: 560px;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.2s;
transform-origin: 0 0;
transform: scale(0,0);
}
&:after {
content: '';
display: block;
padding-top: 0%;
transition: padding 0.2s;
}
&.open:after {
padding-top: 56.25%;
}
&.open iframe {
transform: scale(1,1);
}
}
The end result is similar but not exact to what you were wanting:
https://jsfiddle.net/jmarikle/kjd87was/