Skip to content

Instantly share code, notes, and snippets.

@gnarf
Created May 20, 2011 23:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gnarf/984039 to your computer and use it in GitHub Desktop.
Save gnarf/984039 to your computer and use it in GitHub Desktop.
jQuery Animation Proposal Example
#spinner {
...
-webkit-mask-image: url(../img/spinner.png);
background-color: #000;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes spinnerRotate {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
/* And in jQuery v1.unicorns: */
$.keyFrames.spinnerRotate = {
from: {
rotate: "0deg" // Powered by cssHook!!!! :)
},
to: {
rotate: "360deg"
}
};
$("#spinner").anim({
name: "spinnerRotate",
duration: 2000,
iterationCount: false, // infinite???
timingFunction: easing // easing??
});
// How about something inline? (as an alternative)
$("#spinner").anim({
keyFrames: {
from: {
rotate: "0deg" // Powered by cssHook!!!! :)
},
to: {
rotate: "360deg"
}
},
duration: 2000,
iterationCount: false, // infinite???
timingFunction: easing // easing??
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment