Skip to content

Instantly share code, notes, and snippets.

@tiborsaas
Created July 18, 2012 16:50
Show Gist options
  • Save tiborsaas/3137409 to your computer and use it in GitHub Desktop.
Save tiborsaas/3137409 to your computer and use it in GitHub Desktop.
Pulsating image with Chrome CSS3 filters
/**
* Pulsating image with Chrome CSS3 filters
*/
html {
background: linear-gradient( 70deg, #fff, #666 );
min-height: 100%;
}
@keyframes color-pulsate{
0% { -webkit-filter: hue-rotate(0deg) saturate(20%) }
50% { -webkit-filter: hue-rotate(3600deg) saturate(150%) }
100% { -webkit-filter: hue-rotate(0deg) saturate(20%) }
}
#icon{
width: 128px;
height: 128px;
margin: 200px auto;
background-image: url( http://cdn1.iconfinder.com/data/icons/macosxstyle/macosxstyle_png/128/iSync.png );
animation: color-pulsate 25s infinite linear;
}
<div id="icon"> </div>
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment