Transitions on the CSS Opacity Property

I'm currently designing a CSS text fade-in so it fades the next line of text after a few seconds - basically a regular CSS-only opacity transition, but one that also includes an embedded iframe.

At the moment, it appears that CSS 3 opacity does not apply to the 'iframe' property, i.e., you can't add an iframe before the closing 'div' or add 'iframe' to the opacity (or any combination).

Is there a way to allow the text to fade in then time the appearance of the 'iframe' youtube video followed by the third piece of text on a page?

I'm aware that you can use transitions on the visibility: property, but I can't think of a way to use that effectively.

I was able to do this with JQuery but that requires a special function just for the iframe video. Anything else just failed miserably.

I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.

<style>
        
#fade p iframe {
    margin-top: 25px;
    text-align: center;
    animation: fadein 20s;
    -moz-animation: fadein 20s; /* Firefox */
    -webkit-animation: fadein 20s; /* Safari and Chrome */
    -o-animation: fadein 20s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

</style>



<div id="fade">
<p>lorem ipsum factorum 

<iframe src="..."></iframe>

</p>
</div>

The code above works fine for TEXT ONLY. The opacity fades in over time, but the desired effect would be that the text fades in first, followed by the video (or at the same time) below the fading text.