Skip to content

Instantly share code, notes, and snippets.

@frozonfreak
Created October 11, 2013 02:39
Show Gist options
  • Save frozonfreak/6928794 to your computer and use it in GitHub Desktop.
Save frozonfreak/6928794 to your computer and use it in GitHub Desktop.
CSS Gradient Animation from Source http://trentwalton.com/bgclip/ Browser : Safar and Chrome
<div id="container">
<div class="content">
<div class= "masked">
<h1>Selectable Text</h1>
</div>
</div>
</div>
.masked{
background: url(/bgclip/img/paint.png) repeat, white;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation-name: masked-animation;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes masked-animation {
0% {background-position: left bottom;}
100% {background-position: right bottom;}
}
/* Reset
-------------------------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
table{border-collapse:separate;border-spacing:0;margin-bottom:1.4em;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:;}
a img{border:none;}
/* Page
-------------------------------------------------------------- */
#container{margin:0 auto;width:920px;}
.content{margin-top: 30px;}
.main{width: 920px;margin:0 auto;}
body { font-size: 98%;line-height:1.6;color: #666666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;text-align: center;}
p { margin: 0 0; }
strong { font-weight: bold; }
em { font-style: italic; }
a { color: #0f83a2; text-decoration: none;font-weight: bold;}
a:hover { color: #efd903;}
a{-webkit-transition: color .6s linear;}
a:hover{-webkit-transition: color .1s linear;}
@font-face {font-family: 'LeagueGothicRegular';src: url('League_Gothic.eot');src: url('League_Gothic.woff') format('woff'), url('League_Gothic.otf') format('opentype'), url('League_Gothic.svg#LeagueGothic') format('svg');}
h1 { font-family: "LeagueGothicRegular",Lucida, sans-serif; font-size: 215px; line-height: 1;text-transform: uppercase;letter-spacing: -6px;margin-bottom: 10px;}
.masked{color:#fff;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment