 |
New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 8 |
Asymmetric Transitions
This page demonstrates how to apply an assymetric transition in which the effect when going into the hover state is different from the effect coming out of the hover state. Select the initial and end states of the transition from the form button below. View the transition by hover your mouse pointer over the object in the transition box. The CSS code for the transition appears below the transition box.
CSS Asymmetric Transitions
Initial State
10px 200px0px 700px
0% 50%
Transition Back to the Initial State
duration: s delay: s
select styles to transition forward
duration: s delay: s
duration: s delay: s
duration: s delay: s
duration: s delay: s
End State
10px 200px0px 700px
0% 50%
Transition Forward to the End State
duration: s delay: s
select styles to transition
duration: s delay: s
duration: s delay: s
duration: s delay: s
duration: s delay: s
Hover the Mouse Pointer over the Box to View the Transition
div#outcomebox div#transobject {
width: 50px;
height: 50px;
left: 0px;
background-color: rgb(255, 255, 128);
border-radius: 0%;
transition: none;
}
div#outcomebox:hover div#transobject {
width: 200px;
height: 200px;
left: 500px;
background-color: rgb(128, 0, 255);
border-radius: 50%;
transition: none;
}
width: 50px;
height: 50px;
left: 0px;
background-color: rgb(255, 255, 128);
border-radius: 0%;
transition: none;
}
div#outcomebox:hover div#transobject {
width: 200px;
height: 200px;
left: 500px;
background-color: rgb(128, 0, 255);
border-radius: 50%;
transition: none;
}