CSS3 Shiney Shiney

#spinnerIcon img {
	background-repeat:no-repeat;
	background-position: center;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 215px 140px;

	-webkit-mask-image: -webkit-gradient(linear, left top, right bottom,
					color-stop(0.00,  rgba(0,0,0,1)),
					color-stop(0.25,  rgba(0,0,0,1)),
					color-stop(0.50,  rgba(0,0,0,0.65)),
					color-stop(0.75,  rgba(0,0,0,1)),
					color-stop(1.00,  rgba(0,0,0,1)));

	-webkit-mask-size: 430px 140px;

	-webkit-animation-name:             shinyshiny;
	-webkit-animation-duration:         3s;
	-webkit-animation-iteration-count:  infinite;
	-webkit-animation-timing-function:  linear;
        -webkit-animation-delay: 5s;

	-webkit-transform:translate3d(0,0,0);

}

@-webkit-keyframes shinyshiny {
	  0%   {-webkit-mask-position: -215px 0px;}
	  50%  {-webkit-mask-position: 0px 0px;}
	  100%   {-webkit-mask-position: 215px 0px;}
}
This entry was posted in Development. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>