HTML and CSS Reference
In-Depth Information
<div class="test second-position"></div>
Now you will see a screen similar to the one shown in Figure 5-2.
Figure 5-2.
Final position for the test div
The final thing to do is to add a transition to the
.test
class. This will dictate
how and what properties should be transitioned, as well as the timings for the
transition.
The transition property is currently vendor specific and, as always, it is good
practice to include all of the vendor properties. The following code will create a
transition for all properties of the
test
element.
.test {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 50px;
background-color: blue;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
In order for the transition to work, you need to dynamically add the
second-
position
class to the element. You can do this using JavaScript. The following
script will search for the first element with a class name of
test
and append the
second-position
class to it. You should place it underneath the test element, as
shown.
