Game Development Reference
In-Depth Information
transition-property: padding;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 1s;
}
In short hand, the order of these parameters are:
property
,
duration
,
timing
function
, and
delay
. You can also specify multiple properties in the same declar-
ation by using a comma-separated list of properties:
#navOptions {
position: relative;
top: 10px;
left: -230px;
width: 325px;
overflow: auto;
padding: 10px;
border-radius: 0 10px 10px 0;
transition: padding 0.3s ease-out 0.1s, left
0.5s linear,background ease-in 1s 1s;
}
Note that you can have any arbitrary number of properties specified, or simply use
the keyword
all
. Also, as shown in the previous example, not all values need to
be the same (each property can have a different duration, timing function, or delay).
The default delay is
0
(meaning that the transition starts right away as soon as the
property change is triggered), and the default value for the timing function is ease.
Animations
The animations API is somewhat similar to the transitions API, but the main differ-
ence is that we get to specify two or more keyframes and the browser transitions
between these keyframes. A keyframe is simply a point in time, with a series of prop-
erties specified for that particular point.
