JavaScript Event Listener with CSS3 Webkit Animations

CSS3 has a property called “webkitAnimationEnd” which can be used as an event lister in JavaScript. function cssAnimationEnd() { //looks for the ID box from the css and fires the event listen when the animation is complete. box.addEventListener( ‘webkitAnimationEnd’, function( event ){ alert( “Finished animation!” ); }, false ); } Working with event listers like […]

CSS3 Webkit Fade Effect With KeyFrame

Here is an example of a basic fade animation using a CSS3 fade using “-webkit-transition: opacity” property. Please note you need to use a webkit browser to view the animation working. View the example Here. Here is the code used to create the animation: #box { width:500px; height:500px; background:#fff; padding:0; margin:0 auto; /*begin animation properties*/ […]

Basic Webkit Animation

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 […]

CSS3 :Target

“:traget” One of the new pseudo classes implemented in CSSS 3. Combined with CSS animation. It is very cool and easy to feature to implement. First lets define a css keyframe that will work with “target” (Not this will only work on webkit browsers. It is possible to run on FF maybe IE9? although I […]

Pseudo CSS first-child, last-child

In CSS 2.1 the “first-child” and CSS 3 adds “last-child” pseudo-class implementation. These allow for specific stlyes to be added to beginning and ending elements. This can be extremely helpful for navigation and other common list types. The one draw back of using these pseudo-classes is ie6 will not support them. Here is a short […]

Advanced CSS Attribute Selector Demo

Recently a back end developer asked me with there was a way to use a wild card in CSS that would allow him to generate ID’s on the fly. The solution I came up with was to use an attribute selector. When using attribute selectors in CSS the name before the “|” is the attribute […]