Game Development Reference
In-Depth Information
if a link is set to have a blue color by default and the font color changes to purple
when the user moves the mouse cursor over that text, a CSS transition would cause
the text to smoothly and gradually change the blue into the purpose color, instead of
simply changing the color property in the blink of an eye.
Remember, only properties that can possibly have intermediate states can transition
between states. Normally, you can determine if that is the case with a particular at-
tribute by looking at the value assigned to the attribute. If the value is a number, such
as 10px, 2.5em, or 50%, then you can be sure that a transition property would result
in an incremental change into the
final
state. Since colors are ultimately represen-
ted by numbers, whether they're hexadecimal values or something else, we are able
to apply transition properties to colors as well.
#navOptions {
position: relative;
top: 10px;
left: -230px;
width: 325px;
overflow: auto;
padding: 10px;
border-radius: 0 10px 10px 0;
-webkit-transition: all 0.3s;
}
#navOptions.open {
left: 0;
background: rgba(100, 100, 100, 0.5);
padding-right: 15px;
}
In this example, the element with the
ID
property of
navOptions
is given a trans-
ition attribute. By default, that element has a left position of
-230px
, a patting of
10px
, and no background color. Then we define a class called
open
, and specifically
associate it with the name
#navOptions
element. This class specify different val-
ues for the left, padding, and background properties. Thus, whenever the
#navOp-
tions
element gets assigned to the class
.open
, those three properties will change
gradually from the default into the new values.
