Animation in HTML5, CSS, and jscript
Rotation and color change
Object orientation, shape, and color change through CSS.
Gradually rotate the "DIV" element 180 degrees, and back, while changing the background color, and shape.
Note: CSS Animations do not work in Internet Explorer 9 and earlier versions.
JQuerry animation using queue functionality
By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!
Outline/text animation
Text color and outline size gradual changes in CSS.
Gradually change the outline-width property from 5px to 50px and back to 5px.
Gradually change the color of the text, from red, to blue, and back to red:
The outline-width property, and the text color property, is animatable in CSS.
Note: CSS Animations do not work in Internet Explorer 9 and earlier versions.
Animated Slides
Slide or fade in an element from the top, bottom, left or right of the screen with the w3-animate-* classes, using CSS and jscipt.
CSS animation: Transition-Hover
Think!
outside the box,
from inside a box.
Hover mouse over red graphic
Note: This example of CS3 animation does not work with Internet Explorer 9 and earlier versions.
Ease in-out animation
A straight-forward CSS animation that uses the "animation-timing-function," along with a combination of ease-in, ease-out functions, moving in alternate directions.
Linear
Ease
Ease in
Ease out
Ease In-Out
The animated tags above, display 5 methods of animating an objects 'speed curve' of the transition on a specified section of a page, controlled by its "timing" function.
The 1st "Linear" tag, specifies a transition effect with the same speed from start to end.
2nd tag "Ease," specifies a transition effect with a slow start, then fast, then end slowly (this is default).
3rd tag "Ease In," specifies a transition effect with a slow start.
4th tag "Ease Out," specifies a transition effect with a slow end.
5th tag "Ease In-Out," specifies a transition effect with a slow start and end.
Note: The animation-timing-function property is not suported in Internet Explorer 9 and earlier versions.