Skip to content

Instantly share code, notes, and snippets.

@pbrocks
Created January 14, 2015 01:23
Show Gist options
  • Save pbrocks/852fb44edf06c347e6bb to your computer and use it in GitHub Desktop.
Save pbrocks/852fb44edf06c347e6bb to your computer and use it in GitHub Desktop.
zxZxxw
<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>
.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%;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment