HTML and CSS Reference
In-Depth Information
This objective covers how to:
■
Animate objects by applying CSS transitions
■
Apply 3-D and 2-D transformations
■
Adjust UI based on media queries
■
Hide or disable controls
Transitions provide a mechanism to alter the style of an object such that the change occurs
in a visible gradual fashion. You have the ability to control which style property gets altered
and how long it takes to complete its transition from one style to the other. A transition starts
when the specified property is changed. In its simplest form, the following code transitions
two properties of a
div
element: the
margin-left
and the
background-color
. The transition is to
take one second. The transition will occur when the mouse is hovering over the
div
element.
NOTE
SEE IT FOR YOURSELF
Since this is a book and transitions are visual effects that involve the changing of properties
gradually, screen shots do not demonstrate the functionality very well. You should try the
code in your own webpages to get familiar with the outcomes of the styles and scripts.
The visual effect is that this
div
, which starts off with a gray background, will fade out of
sight to the right. The following code demonstrates this:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: gray;
margin-left: 250px;
margin-top:250px;
transition: background-color 1s, margin-left 1s ;
}
div:hover {
margin-left: 350px;
background-color: white;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Search WWH ::
Custom Search