How can I animate this sequence in CSS/LESS? - css

Question

This is my first foray into animation. I'm trying to create an animated splash screen featuring a sliding logo and two snippets of text that fade in and out. The layout when the text is shown should look like this:
*------------------------*
| |
| |
| [L] Lorem ipsum etc. |
| |
| |
*------------------------*
The animation should progress like so:
Logo [L] begins in the center
Logo slides left making room for each piece of text
Text 1 fades in and out of view to the right of logo
Text 2 fades in and out of view in the same location
Logo slides back to center
The problem I'm facing is coming up with the right combination of element hierarchy and animatable properties to put everything where it should be.
My best attempt (below) starts with the text at 0 max width and 0 opacity. I animate max-width on the second, wider text to push the logo aside, then wait an appropriate interval while a second animation reveals the first text using opacity. But I still cannot make both texts appear properly in the same place while the logo stays put. (Assuming there is room on the screen, both texts should appear vertically and horizontally centered in the space to the right of the logo, but the first text will be one line and second will be two lines.)
I'm not sure if this is even the right approach. To make the design responsive I want to avoid specifying absolute dimensions except for the size of the logo and font. I am using Bootstrap if that provides any help.
Codepen example
HTML:
<div class="overlay">
<div class="overlay--splash"></div>
<div>
<div id="overlay__one" class="h1 overlay--text">Short piece of text</div>
<div id="overlay__two" class="h1 overlay--text">Slightly longer text <br /> which will span two lines.</div>
</div>
</div>
LESS:
.overlay {
z-index: 999;
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.9);
padding: 100px;
.overlay--splash {
width: 200px;
min-width: 200px;
height: 200px;
margin: 1em;
display: inline-block;
align-self: center;
justify-content: center;
background-image: url("/images/app-icon.png");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 200px; }
.overlay--text {
display: inline-block;
width: auto;
max-width: 0;
font-size: 64px;
font-weight: 900;
font-family: sans-serif;
color: #dark-blue;
opacity: 0;
}
#overlay__one {
.keyframes(fade-in-out; {
0% { opacity: 0; }
40% { opacity: 0; }
60% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
});
.animation(fade-in-out 5s linear)
}
#overlay__two {
.keyframes(slide-fade; {
0% { opacity: 0; max-width: 0; }
10% { opacity: 0; max-width: 0; }
20% { opacity: 0; max-width: 1600px; }
50% { opacity: 0; max-width: 1600px; }
60% { opacity: 1; }
70% { opacity: 1; }
80% { opacity: 0; max-width: 1600px; }
90% { max-width: 0; }
});
.animation(slide-fade 10s linear)
}
}

Answer 1

Rather than trying to do all of the animation directly in CSS it turned out to be much easier to stack everything in the center of the screen using transform and then animate the transitions with jQuery: https://codepen.io/anon/pen/BWpQXg
var dX = $("#overlay__two").width() / 2;
$(".overlay--splash").animate({left: "-=" + (dX + 140)});
$("#overlay__one").delay(1000).fadeToggle(1000).fadeToggle(1000);
$("#overlay__two").delay(3000).fadeToggle(1000).delay(1000).fadeToggle(1000);
$(".overlay--splash").delay(6000).animate({left: "+=" + (dX + 140)});