HTML and CSS Reference
In-Depth Information
The
CSS
defines the animation and three classes that adjust the rele-
vant properties:
#animateme {
background-color: #666;
position: absolute;
color: #fff;
left: 100px;
top: 100px;
transition-duration: 10s;
}
.changeleft { left: 250px !important; }
.changetop { top: 300px !important; }
.changecolor { background-color: #ff00ff !important; }
Note that you must use
!important
because otherwise the
ID
selector
would take precedence. Finally, here's the JavaScript function to
apply the styles to the element when the buttons are clicked:
function clickme(classname) {
var el = document.getElementById('animateme');
el.className += " " + classname;
}
And here's a reset function to clear the styles:
function reset() {
var el = document.getElementById('animateme');
el.setAttribute("style","");
}
If you know exactly where the element needs to go, then adding predefined
classes is fine, but if you want to animate an element based on the result
of a calculation or user input, you can set the style properties of the
element directly. The next example demonstrates this approach.
This example switches to Opera so you can take advantage of the color
input type.