squares-colorshift-shape

_.md

[ Launch: squares-colorshift-shape ] 8b00c9d77212bc006270 by ptvans
[ Launch: squares-colorshift-shape ] 2e08f822fcb14c0c28cd by ptvans
[ Launch: squares-colorshift ] 7efba581d119fbb725ae by ptvans
[ Launch: squares ] 7542a276afd923a85985 by ptvans
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"squares-colorshift-shape","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/amF9T1W.gif","fullscreen":false,"ajax-caching":true}

index.html

<div id="container">

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

  <div class="clear:both;"></div> 
  
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
    <div class="clear:both;"></div> 

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
    <div class="clear:both;"></div> 

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
    <div class="clear:both;"></div> 

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
    <div class="clear:both;"></div> 

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
    <div class="clear:both;"></div> 

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
    <div class="clear:both;"></div> 
  
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

    <div class="clear:both;"></div> 
  
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
    <div class="clear:both;"></div> 

<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
  
  
</div>

inlet.js

{}

style.css

#container {
	width: 650px;
  	overflow: hidden;
  padding:40px;
}

.sq {
position: relative;
display: inline-block;
margin: 2px;
background-color: rgba(255,255,255,0.5);
height: 10px;
width: 50px;
-webkit-box-shadow: 0px 1px 3px rgba(20,20,20,0.5);
opacity: 0.6;

}


.sq:hover {
	transform: translate3d(1px,1px,1px) rotateX(-20deg) rotateY(20deg) scaleZ(10.0);
}

/*color*/
.sq {
    -webkit-animation: colorshift 1s linear infinite alternate; /* Chrome, Safari, Opera */
}

/* Chrome, Safari, Opera */
@-webkit-keyframes colorshift {
    from {
    	background-color: #de5363; 
    	margin: -2px; 
    	/*border-radius: 5%;*/
    	transform: translate3d(1px,1px,1px) rotateX(20deg) rotateY(-20deg) scaleX(1.0);}
    to {
    	background-color: #edcd58; 
    	margin: 2px; 
    	/*border-radius: 50%;*/
    	transform: translate3d(1px,1px,1px) rotateX(-20deg) rotateY(20deg) scaleX(5.0);}
}

.sq01 {
  -webkit-animation-delay: 500ms;
}

.sq02 {
  -webkit-animation-delay: 1500ms;
}

.sq03 {
  -webkit-animation-delay: 2000ms;
}


/* Standard syntax
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;*/