How do I put 'fadein' and 'animate' texts in the middle of the page?

Question

I was wondering if it is possible to assign a group of stacking texts in the middle of the page? placing them in the center wasn't too difficult, but the problem was that they are positioned left, right, top, and bottom, which I think means they need to be given: position:absolute. Furthermore, the .headline texts are given fade-in(opacity 0 to 100) and animation commands. In terms of scaling, the texts are responsive, and get smaller as the window gets smaller. In addition they are assigned their own z-index.

In the image below, I have laid out the overall structure I would like to achieve, but I'm experiencing a lot of difficulty doing so because of the text behaviors I want to accomplish.

enter image description here

For functionality reference, here is a jsfiddle.

Please help me and thank you in advance! Please note that I would prefer to use CSS only since it's a simple function that only occurs once upon page load. However, if this is a issue that only javascript can solve, please let me know :)

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.fade {
    -webkit-animation-name: fade;
    -moz-animation-name: fade;
    -o-animation-name: fade;
    animation-name: fade;
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes flowright {
    0% {
        opacity: 0;
        left: -100px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@keyframes flowright {
    0% {
        opacity: 0;
        left: -100px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@-webkit-keyframes flowleft {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@keyframes flowleft {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@-webkit-keyframes flowup {
    0% {
        opacity: 0;
        margin-top: 100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@keyframes flowup {
    0% {
        opacity: 0;
        margin-top: 100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@-webkit-keyframes flowdown {
    0% {
        opacity: 0;
        margin-top: -100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@keyframes flowdown {
    0% {
        opacity: 0;
        margin-top: -100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
.flow {
    display: inline-block;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.right {
    -webkit-animation-name: flowright;
    animation-name: flowright;
}
.left {
    -webkit-animation-name: flowleft;
    animation-name: flowleft;
}
.up {
    -webkit-animation-name: flowup;
    animation-name: flowup;
}
.down {
    -webkit-animation-name: flowdown;
    animation-name: flowdown;
}
.sequence01 {
    -webkit-animation-delay: 0.1s;
}
.sequence02 {
    -webkit-animation-delay: 0.2s;
}
.sequence03 {
    -webkit-animation-delay: 0.3s;
}
.sequence04 {
    -webkit-animation-delay: 0.4s;
}
/* Headline Typography */
.headline {
    font-family: helvetica;
    font-weight: bold;
    font-size: 4em;
}
/* Rows */
 .row01, .row02, .row03 {
    clear: both;
}
.row01 {
    left:20%;
    top: 0;
    position: relative;
}
.row02 {
    right:10%;
    top: 50%;
    position: relative;
}
.row03 {
    left:10%;
    top: 100%;
    position: relative;
}
/* General Structure */
 body {
    width: 100%;
    height: 100%;
}
.pagewrap {
    height: 100%;
    width: 80%;
    max-width: 48em;
    margin: 0 auto;
    background-color: #fff6d6;
}

<body>
    <div class="pagewrap">
        <div class="headline">
            <div class="row01 flow left sequence01">ROW 01</div>
            <br/>
            <div class="row02 flow right sequence02">ROW 02</div>
            <br/>
            <div class="row03 flow up sequence03">ROW 03</div>
        </div>
    </div>
</body>

I moved the elements like in your image, isn't that what you wanted ? — adeneo, Nov 21 '14 at 03:31
Hmm... I'm not really seeing a difference. The texts are still stacked on top of the page, the animations (flow) are not responding... Is the url that you provided correct? — kenhimself, Nov 21 '14 at 03:33
I probably misunderstood, I just moved the text to match the image. — adeneo, Nov 21 '14 at 03:38
that looks great! however, when loading the page, the texts respond to the other text animations. Is there a way the text can maintain its position? Thank you in advance for all the help :) EDIT: Nevermind, resolved! — kenhimself, Nov 21 '14 at 04:04

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

The solution given by adeneo in the comments may work perfectly fine, but since your layout is strictly vertical, why not just use a block layout instead of inline-block or floats?

fiddle here.

You mention a "padding" percentage between the rows as well. Note that margin and padding css attributes as percentages will key off of the width not the height. I placed divs to solve that, but there are other solutions.

Edit

If the headline needs to be vertically centered to the page, here's a nifty way to do it using the "ghost element technique":

/* Headline Typography */
 .wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
}
 
/* The ghost, nudged to maintain perfect centering */
.wrapper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

.headline {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    font-family: helvetica;
    font-weight: bold;
    font-size: 4em;
}

fiddle

I learned of it here.

Hi @NanoWizard, the website is actually not strictly vertical—thats why i set the page-wrap to a height of 100% and a width of 80%. adeneo's method works for me because it responds to the windows top and bottom point, thus centering it in the middle. However, your second suggestion was interesting — what a good idea— to use the padding to fill the remaining vertical space. I'll give that a try. Thanks! :) — kenhimself, Nov 21 '14 at 04:29

How do I put 'fadein' and 'animate' texts in the middle of the page?

1 Answers1

Edit