CSS JQuery: How to put 'fadein' and 'animate' texts in the middle of the page ?

<style type="text/css">

.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 {
-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 */
.wrapper {
position: relative;
height: 100%;
width: 100%;
}

.headline {
height: 100%;
position: relative;
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
/* Rows */

.row01 {
position: relative;
}
.row02 {
text-align: right;
position: relative;
}
.row03 {
padding-left: 20%;
position: relative;
}
/* General Structure */
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.pagewrap {
left: 10%;
right: 10%;
top: 0;
bottom: 0;
position: absolute;
max-width: 48em;
background-color: #fff6d6;
}

.top-headline-pad {
height: 10%;
}
.headline-pad {
height: 5%;
}
.bottom-headline-pad {
height: 10%;
}

</style>

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

Output :)

CSS JQuery

Saturday, December 6, 2014

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

No comments:

Post a Comment