Quantcast
Channel: J.P. McGarrity.com » motion
Viewing all articles
Browse latest Browse all 4

Basic Webkit Animation

$
0
0

This is the first part of a series of CSS webkit animations.
#spinner {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -256px;
height: 256px;
width: 256px;
text-indent: -999em;
white-space: nowrap;
overflow: hidden;
-webkit-mask-image: url('../images/spinner.png');
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background:#ccc;
}
@-webkit-keyframes spinnerRotate {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}

View the animation here.

This original code was take from 24ways.org and modified.


Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images