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
Animating objects by applying CSS transitions
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