jQuery Animation Proposal Example 2

example.css

@-webkit-keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}

.pulsedbox {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 4s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in-out;
}

example.js

/* And in jQuery v1.unicorns: */

// Seems like it's all about percentages, so we can probably remove the % ???
$.keyFrames.pulse = {
    "0%": {
        backgroundColor: "red",
        opacity: 1.0,
        rotate: "0deg", /* assume rad as default unit -- cssHook anyway! */
        scale: 1
    },
    "33%": {
        backgroundColor: "blue",
        opacity: 0.75,
        rotate: "-5deg",
        scale: 1.1,
    },
    "67%": {
        backgroundColor: "green",
        opacity: 0.5,
        scale: 1.1,
        rotate: "5deg",
    },
    "100%": {
        backgroundColor: "red",
        opacity: 1.0,
        scale: 1.0,
        rotate: "0deg",
    }
};        

$(".pulsedbox").anim({ 
    name: "pulse",
    duration: 4000,
    direction: "alternate", // back and forth like!
    timingFunction /* easing? */: "ease-in-out"
});