New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 8

Applying a transition

This page demonstrates how to apply a transition to a hover effect. Select the initial and end states of the transition from the form button below. Select the styles you wish to affect in the transition and the transition timing. 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 Transitions

Initial State

background-color:
left: 0px 700px
width/height: 10px 200px
border-radius: 0% 50%

End State

background-color:
left: 0px 700px
width/height: 10px 200px
border-radius: 0% 50%

Transition Styles

none
all seconds

select styles to transition
background-color seconds
left seconds
width/height seconds
border-radius seconds

Hover the Mouse Pointer over the Box to View the Transition

div#outcomebox div#transobject {
    background-color: rgb(255, 255, 128);
    left: 0px;
    width: 50px;
    height: 50px;
    border-radius: 0%;

    transition: none;
}

div#outcomebox:hover div#transobject {
    background-color: rgb(128, 0, 255);
    left: 500px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Carey, P. New Perspectives on HTML5 and CSS3, 8th Edition, Cengage Learning: Boston, 2019.