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.
Search WWH ::




Custom Search