How can I animate this sequence in CSS/LESS?

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)
  }
}

Travis · Accepted Answer · 2017-03-08 23:36:42Z

0

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)});

answered Mar 8, 2017 at 23:36

Travis

2,4622 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I animate this sequence in CSS/LESS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related