Flipping Cube on page load CSS - html

Question

Basically I'm trying to create this flipping effect that I found on this site
You can see the effect on the main title and subtitle when clicking on the far right arrow (to see the arrow hover over at the far right of the colored section) which makes the titles flip up.
I don't really know how to do this effect so I found an example on the web, but the problem is that it has the hover state to it and I can't get my head around how to make it auto start on page load instead of hovering. As you can see on this example the flip sides A and B are both colored, I wish to start from A side being background white and text in white then flip it into to the colored version, so with other words from invisible to visible.
Check my working Demo here
The code for this example is the following:
/* Set-up */
body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}
/* The two faces of the cube */
.flippety,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
height: 100px;
}
/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}
<div class="cube">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>
My goal:
Is to create a flipping cube that flips my title up automatically (no hover) on page load.
If something is not clear please let me know and I will try to explain as clear as possible. Thank you!

Answer 1

In the example you give, there are no 3d transforms for the title flip. It is a simple 2D translation on the Y axis like this one:
div{
position:relative;
font-size:2em;
line-height:1.2em;
height:1.2em;
overflow:hidden;
}
h2{
font-size:1em;
margin:0; padding:0;
animation:slide .5s .5s ease-out forwards;
}
#keyframes slide {
to {transform:translateY(-1.2em);
}
<div id="titles">
<h2>this is title one</h2>
<h2>This is a second title</h2>
</div>

Answer 2

I'm not sure what you are trying to accomplish but if you only want it to flip once when the page is ready you can change the css class ".cube:hover" to ".cubeRotate" and then use jQuery to rotate it on page load like this:
$( document ).ready(function() {
$(".cube").addClass("cubeRotate");
});
You can see it here: https://jsfiddle.net/qro8euyo/ working with 2 seconds delay (otherwise it will be too fast for the user to catch it)