CSS3 is the newest CSS standard, and is supported by all modern browsers. Among the new style properties supported in CSS3, there are animation properties. Those properties allows you to animate HTML elements without the need of Javascript. CSS3 allows more animation options than those done by the non-standard yet supported marquee tags. It also allows gradual changes of font sizes, colors, rotation angles, etc.
To make an element or a group of elements (defined by a selector) animated, add animation properties to its selector’s property block. For multi-browser support, writing each animation property twice – once with the prefix ‘-webkit-‘ and once without – is recommended.
In addition, you should add two animation rules: “@keyframes” and “@-webkit-keyframes” to describe the animated changes of elements.
NOTE: Chrome, Safari & Opera require the ‘-webkit-‘ prefix` Firefox and Explorer 10+ do not.
Animation Attributes
For my own convenience, please allow me to drop the ‘-webkit-‘ prefix from the following attribute names:
- animation: animation-name duration;
- animation-iteration-count: number-of-iterations;
number-of-iterations may be an integer or “infinite” - animation-direction: direction.
direction of change, not only left-to-right or top-to-bottom, but also, for example, from onecolor to another. the values for this property can be: normal, reverse, alternate, alternate-reverse, initial, or inherit, - animation-timing-function: function
Function can be: linear, ease, cubic-bezier, etc. Read more here.
Here’s a little code example:
div {
position: relative;
overflow: hidden;
/* Chrome, Safari, Opera: with the prefix '-webkit-', others without. */
-webkit-animation: myfirst 10s;
animation: myfirst 10s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
Read more about animation properties here.
Key Frame Rules
A key frame rule describes the gradually changed values at each key frame. The key frame value can be ‘from’, ‘to’ or the percentage of progress.
The syntax is:
@[-webkit-]keyframes animation-name {
keyframe-value: {property-list}
.
.
.
}
Here’s a little code example:
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {color: red; font-size: 12px; left: 0px;}
to {color: black; font-size: 48px; left: 100%; transform: rotate(-90deg)}
}
/* Standard syntax */
@keyframes myfirst {
from {color: red; font-size: 12px; left: 0px; }
to {color: black; font-size: 48px; left: 100%; transform: rotate(-90deg);}
}
Read more about key frames here.
PHP & More 