 |
New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 8 |
Delaying a transition
This page demonstrates how to delay a transition in order to apply different styles at different times. Select the start and ending styles from the form below. To apply styles after different delays, click the Select styles to transition option button and then enter the duration, timing functions, and delays for each style. Hover your mouse pointer over the transition box to view the effect of the delayed transitions.
CSS Transition Delays
Initial State
10px 200px0px 700px
0% 50%
End State
10px 200px0px 700px
0% 50%
Transition Styles
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%;
}
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%;
}