zxZxxw

index.html

<div class="device_body">
  <div class="camera"></div>
  <div class="screen">
    <div class="logo"></div><div class="nav"></div>
    <div class="banner"></div>
    <div class="row"></div><div class="row"></div><div class="row"></div>
    <div class="footer"></div>  
  </div>
</div>

style.less

.animationSets(){
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

.borderRadius(){
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

body{
  background: #d35400;
  animation: bodyAnimation 10s;
  -webkit-animation: bodyAnimation 10s;
  .animationSets();
}

.device_body{
  width: 50%;
  max-width: 600px;
  min-width: 300px;
  height: 0 auto;
  padding: 10px 10px 40px 10px;
  overflow: hidden;
  margin: 10% auto;
  background: #000;
  .borderRadius();
  animation: deviceAnimation 10s;
  -webkit-animation: deviceAnimation 10s;
  .animationSets();
    
  .camera{
    width: 100%;
    width: 10%;
    height: 10px;
    margin: 10px auto;
    background: #bdc3c7;
    .borderRadius();
  }
  
  .screen{
    width: 90%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding: 10px;
    background: #fff;
    
      .logo{
        width: 15%;
        margin-right: 5%;
        height: 25px;
        background: #3498db;
        display: inline-block;
        animation: logoAnimation 10s;
        -webkit-animation: logoAnimation 10s;
        .animationSets();
      }
    
   
      .nav{
        width: 80%;
        height: 25px;
        background: #9b59b6;
        display: inline-block;
        animation: navAnimation 10s;
        -webkit-animation: navAnimation 10s;
        .animationSets();
      }
    
      .banner{
        width: 100%;
        height: 80px;
        margin-top: 10px;
        clear: both;
        background: #3498db;
      }
    
     .row{
       width: 30.333333%;
       display: inline;
       height: 80px;
       display: inline-block;
       margin: 10px 0 0px 2%;
       background: #9b59b6;
       animation: rowAnimation 10s;
      -webkit-animation: rowAnimation 10s;
      .animationSets();
     }
    
    .footer{
        width: 100%;
        height: 50px;
        margin-top: 5px;
        background: #3498db;
      }
    
  }
  
}

@-webkit-keyframes bodyAnimation {
    0%   {background: #d35400;}
    20%  {background: #d35400;}
    40%  {background: #f1c40f}
    60%  {background: #f1c40f}
    80%  {background: #2ecc71;}
    100% {background: #2ecc71;}
}

@keyframes bodyAnimation {
    0%   {background: #d35400;}
    20%  {background: #d35400;}
    40%  {background: #f1c40f}
    60%  {background: #f1c40f}
    80%  {background: #2ecc71;}
    100% {background: #2ecc71;}
}



/*** Device Body **/
@-webkit-keyframes deviceAnimation {
    0%   {width: 50%;}
    20%  {width: 50%;}
    40%  {width: 0px}
    60%  {width: 0px;}
    80%  {width: 50%;}
    100% {width: 50%;}
}

@keyframes deviceAnimation {
    0%   {width: 50%;}
    20%  {width: 50%;}
    40%  {width: 0px}
    60%  {width: 0px;}
    80%  {width: 50%;}
    100% {width: 50%;}
}

/*** Logo ***/
@-webkit-keyframes logoAnimation {
    0%   {display: inline-block; margin-left: 0%}
    20%  {display: inline-block; margin-left: 0%;}
    40%  {display: block; margin-left: 41.5%;}
    60%  {display: block; margin-left: 41.5%;}
    75%  {display: inline-block; margin-left: 0%}
    100% {display: inline-block; margin-left: 0%}
}

@keyframes logoAnimation {
    0%   {display: inline-block; margin-left: 0%}
    20%  {display: inline-block; margin-left: 0%;}
    40%  {display: block; margin-left: 41.5%;}
    60%  {display: block; margin-left: 41.5%;}
    75%  {display: inline-block; margin-left: 0%}
    100% {display: inline-block; margin-left: 0%}
}


/*** Nav ***/
@-webkit-keyframes navAnimation {
    0%   {width: 80%; display: inline-block;}
    20%  {width: 80%; display: inline-block;}
    40%  {width: 100%; display: block;}
    60%  {width: 100%; display: block;}
    75% {width: 80%; display: inline-block;}
    100% {width: 80%; display: inline-block;}
}

@keyframes navAnimation {
    0%   {width: 80%; display: inline-block;}
    20%  {width: 80%; display: inline-block;}
    40%  {width: 100%; display: block;}
    60%  {width: 100%; display: block;}
    75% {width: 80%; display: inline-block;}
    100% {width: 80%; display: inline-block;}
}

/*** Row ***/
@-webkit-keyframes rowAnimation {
    0%   {width: 30.333333%; display: inline-block; margin: 10px 0 10px 2%;}
    20%  {width: 30.333333%; display: inline-block; margin: 10px 0 10px 2%;}
    40%  {width: 100%; display: block; margin: 10px 0 10px 0%;}
    60%  {width: 100%; display: block; margin: 10px 0 10px 0%;}
    75%  {width: 30.333333%; display: inline-block; margin: 10px 0 10px 2%;}
    100% {width: 30.333333%; display: inline-block; margin: 10px 0 10px 2%;}
}

@keyframes rowAnimation {
    0%   {width: 30.333333%; display: inline-block; margin: 10px 0 10px 2%;}
    20%  {width: 30.333333%; display: inline-block; margin: 10px 0 10px 2%;}
    40%  {width: 100%; display: block; margin: 10px 0 10px 0%;}
    60%  {width: 100%; display: block; margin: 10px 0 10px 0%;}
    75%  {width: 30.333333%; display: inline-block; margin: 10px 0 10px 2%;}
    100% {width: 30.333333%; display: inline-block; margin: 10px 0 10px 2%;}
}

zxZxxw.markdown

zxZxxw

A Pen by Nick Eli on CodePen.

License.