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

Custom Search