Game Development Reference
In-Depth Information
Transitions
CSS Transitions are a way to easily add animations to a web page. Basically, it allows us to perform an
animation between two given states. CSS properties will change CSS values, which will be animated
smoothly over a specified duration.
To use CSS Transitions, like in a state machine, we first need to identify states and actions.
States
are
CSS selectors and
actions
are changes made between these CSS selectors.
We'll describe the transition with the following four CSS Transitions properties:
transition-property
: describes properties to use for transitions (all by default)
transition-duration
: describes the duration of the transition
transition-delay
: describes the delay before starting the transition
transition-timing-function
: describes the speed variation of the transition
If you want to make an effect when hovering the mouse over an element, for example, you will use the
:hover
pseudo-class and your two selectors could be
#myel
and
#myel:hover
.
The following code makes a one-second color transition from red to green when the mouse is hovering.
#myel {
transition-duration: 1s;
color: red;
}
#myel:hover {
color: green;
/* transition-duration: 1s; is found through by inherence */
}
Tip
The transition-duration property describes the transition time to enter to the related
state. Hence, we can have different times for the two directions.
You can also have different transitions for different properties by splitting values between commas. For
instance, from
#myel
to
#myel:hover
, you can easily and simultaneously
increase the padding from 0 to 10 pixels within 2 seconds
change the color from red to green after a 1 second of delay
Listing 3-5.
The code
#myel {
transition-duration: 1s, 2s;
transition-delay: 1s, 0s;
transition-property: color, padding;
color: red;
padding: 0px;
}
