Experimenting with CSS3 – Keyframe Animation

Experimenting with CSS3 – Keyframe Animation

Animation is currently possible in languages like SVG, but no system exists for the native animation of CSS styles. The new proposal for CSS3 standards introduce defined animations, which specify the values that CSS properties will take over a given time interval. How to do this? Animation is done using the @keyframes selector. The keframe definition will contain the initial stage and final stage of the object. If finer control of the intermediate values is required, the ‘percentage’ keyframe-selector can be used. Syntax @keyframes ‘<identifier>‘ { /* ‘from ‘ is equailent to writing 0%. So for more control in animation you can use key-frame selectors as 0%, 1%, 10% … 100% */from {   selector:value;   selector:value; } /* ‘to’ is equailent to writing 100%. */ to {   selector:value;   selector:value; } } Example @keyframes flybird { 0%        { left:0px;    top:200px;  }     50%        { top:100px;}     100%     { top:200px; } } @keyframes flybird { from        { left:0px;    top:200px;  } to     { top:200px; } } Try the demo to see how things...
Design Tools

Design Tools

A list of tools that will help you make web development more easier. Data Gathering Tools Click Tale Google Analytics Design Pattern Libraries Welie.com Yahoo Design Library UI Patterns Dribble Pattern Tap Design Pattern Library Designmoo Patternry Elements of Design UI Pattern Collections Wireframe Axure Pencil [ Firefox Plug-in ] Balsamiq Design Resource Sites Designmoo...