Animation in the DOM
Animation is defined as the movement of elements around the screen, and also often includes the manipulation of some other styles, including the spacing between letters & words, and the size of text. Just as with all other examples we have seen so far, you must first locate the element you wish to manipulate. Once again, you may use either the ID or the document tree hierarchy. Then you can use properties such as:
to move that element around, provided it is absolutely or relatively positioned. Consider the below:
Here's the code for it:
Please remember that the top and left positions are not all that can be manipulated in the DOM. Some other noteworthy properties are: letter-spacing, word-spacing, font-family, font-size, color, background, width, height, border, margin, padding, and border-style. The letter-spacing & word-spacing properties are represented in em, font-family is represented by any valid font, font-size defaults to em, color & background take any valid color, width and height default to px, border, margin, and padding take both a color value and a pixel value ("border: blue 3px"), and border-style accepts either solid, dotted, or a null string.
And with that I conclude this tutorial. Have fun learning what's possible using the modern DOM!