Creating CSS3 WebKit Animations

WebKit is a layout engine software component for rendering web pages in the browser. It can easily be used to give HTML elements animations and properties involving movement.

You begin by declaring the Webkit and the time length -webkit-animation: rotation 1.5s linear 1;. The -webkit-animation: rotation 1.5s linear 1; calls my @-webkit-keyframes rotation{ }. Note that rotation is an alias and not a WebKit method name. Rotate however, is a webkit-transform method which can be passed a value.

@Keyframes are where you implement the actions your animation will make. In my example I use only 0% and 100% to have 2 states. You can of course add many more for a more complicated animation. I also use -webkit-animation-fill-mode: forwards; to make my animation run only once.

Different browsers have different engines for interpreting Webkits. Webkit is native to Apple’s Safari and Google’s Chrome and seem to work best in these environments. FireFox and Internet Explorer need slightly different syntax to work, so you’ll want to test your animations on all browsers thoroughly.