left to right animation

by Ken Watanabe

HTML

<div class="fade fromright">
Textasdfasdfasfdasf
</div>

<div class="fade fromleft">
Text
</div>

CSS

@-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 fromright { 0% { margin-left:50px; } 100% { margin-left:0px; } } @-moz-keyframes fromright { 0% { margin-left:50px; } 100% { margin-left:0px; } } @-o-keyframes fromright { 0% { margin-left:50px; } 100% { margin-left:0px; } } @keyframes fromright { 0% { margin-left:50px; } 100% { margin-left:0px; } }


@-webkit-keyframes fromleft { 0% { margin-right:50px; } 100% { margin-right:0px; } } @-moz-keyframes fromleft { 0% { margin-right:50px; } 100% { margin-right:0px; } } @-o-keyframes fromleft { 0% { margin-right:50px; } 100% { margin-right:0px; } } @keyframes fromleft { 0% { margin-right:50px; } 100% { margin-right:0px; } }



.fade, .fromright, .fromleft { -webkit-animation-name: fade, fromright, fromleft; -moz-animation-name: fade, fromright, fromleft; -o-animation-name: fade, fromright, fromleft; animation-name: fade, fromright, fromleft; -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: 1.2s; -moz-animation-duration: 1.2s; -ms-animation-duration: 1.2s; -o-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; }

.fromright {position:fixed; top:50%; left:50%; display:block; }
.fromleft {position:fixed; top:50%; left:50%; display:block; }

.fade {text-align:center;width:80%;top}