Skip to content

Instantly share code, notes, and snippets.

@ptvans
Created August 5, 2014 03:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ptvans/7542a276afd923a85985 to your computer and use it in GitHub Desktop.
Save ptvans/7542a276afd923a85985 to your computer and use it in GitHub Desktop.
squares-colorshift
{"description":"squares-colorshift","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":true,"ajax-caching":true}
<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="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="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="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>
.sq {
position: relative;
display: inline-block;
margin: 10px;
background-color: rgba(60,50,180,0.5);
height: 80px;
width: 80px;
-webkit-box-shadow: 0px 1px 3px rgba(20,20,20,0.5);
opacity: 0.5;
transform: translate3d(1px,1px,1px);
}
/*color*/
.sq {
-webkit-animation: colorshift 2s linear infinite alternate; /* Chrome, Safari, Opera */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes colorshift {
from {background-color: #5d7dd4; margin: -10px;}
to {background-color: #6bbfdb; margin: 10px;}
}
.sq01 {
-webkit-animation-delay: 500ms;
}
.sq02 {
-webkit-animation-delay: 1500ms;
}
.sq03 {
-webkit-animation-delay: 2500ms;
}
/* 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;*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment