App test

by AaronLayton

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<div class="android-view">
    <div class="intro-background">
        <div class="intro-layer radial-gradient"></div>
        <div class="intro-layer animate-left">
            <div class="brand-bar lipstick-bar"></div>
            <div class="brand-bar"></div>
            <div class="brand-bar yoursclothing-bar"></div>
            <div class="brand-bar"></div>
            <div class="brand-bar maxstudio-bar"></div>
        </div>
        <div class="intro-layer animate-right">
            <div class="brand-bar"></div>
            <div class="brand-bar mossbros-bar"></div>
            <div class="brand-bar"></div>
            <div class="brand-bar suitdirect-bar"></div>
            <div class="brand-bar"></div>
        </div>
    </div>
    <img class="intro-logo fadeInUp animated" src="http://www.validatethis.co.uk/playground/brandbook/bb-logo.png" alt="Brand Book" />
    <a href="#" class="intro-buttons fadeInUp animated">
        <img src="http://www.validatethis.co.uk/playground/brandbook/social-buttons.png" alt="Login" />
    </a>
</div>

CSS

html,body{ width:100%;height:100%}
body {margin:0;padding:0;}
.android-view {
    background:#000;
    /*
    width:397px;
    height:677px;
    */
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}
@keyframes animate-left {
    from { transform: translateX(0) translateZ(0) }
    to { transform: translateX(-1010px) translateZ(0) }
}
@-webkit-keyframes animate-left {
    from { -webkit-transform: translateX(0) translateZ(0) }
    to { -webkit-transform: translateX(-1010px) translateZ(0) }
}
@-ms-keyframes animate-left {
    from { -ms-transform: translateX(0) translateZ(0) }
    to { -ms-transform: translateX(-1010px) translateZ(0) }
}
@-moz-keyframes animate-left {
    from { -moz-transform: translateX(0) translateZ(0) }
    to { -moz-transform: translateX(-1010px) translateZ(0) }
}

@keyframes animate-right {
    from { transform: translateX(-1010px) translateZ(0) }
    to { transform: translateX(0) translateZ(0) }
}
@-webkit-keyframes animate-right {
    from { -webkit-transform: translateX(-1010px) translateZ(0) }
    to { -webkit-transform: translateX(0) translateZ(0) }
}
@-ms-keyframes animate-right {
    from { -ms-transform: translateX(-1010px) translateZ(0) }
    to { -ms-transform: translateX(0) translateZ(0) }
}
@-moz-keyframes animate-right {
    from { -moz-transform: translateX(-1010px) translateZ(0) }
    to { -moz-transform: translateX(0) translateZ(0) }
}
.intro-layer{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    z-index:1;
}
.animate-right{ 
    background-position: 0px 0px;
    left:-150px;
    
    animation: animate-right 100s linear infinite;
    -ms-animation: animate-right 100s linear infinite;
    -moz-animation: animate-right 100s linear infinite;
    -webkit-animation: animate-right 100s linear infinite;
}
.animate-left{ 
    background-position: 0px 0px;
    left:-50px;
    
    animation: animate-left 100s linear infinite;
    -ms-animation: animate-left 100s linear infinite;
   ...