8.12.1. CSS3 transition ¶
In CSS3, we don’t need to use Flash animation or JavaScript when we can switch from one style to another in order to add an effect. Mouse over the following elements:
Mouse over the following elements:
CSS3 transition
8.12.2. Browser support ¶
The number in the table represents the first browser version number that supports the property.
The number immediately preceding -webkit- , -ms- , or -moz- is the first browser version number that supports the prefix attribute.
Attribute | |||||
|---|---|---|---|---|---|
Transition | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
Transition-delay | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
Transition-duration | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
Transition-property | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
Transition-timing-function | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
8.12.3. How does it work? ¶
A CSS3 transition is the effect of a gradual change of elements from one style to another.
To achieve this, two things must be specified:
Specify the CSS property to which you want to add an effect
Specifies the duration of the effect.
Example ¶
The transition effect applied to the width attribute for a period of 2 seconds:
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Note: if the specified time limit is not specified transition , there will be no effect because the default value is 0.
The effect changes when the value of the specified CSS property changes. A typical change in the CSS attribute is when the user mouse over an element:
Example ¶
Specifies that when the mouse pointer hovers (: hover) in the Note: when the mouse cursor moves over the element, it gradually changes itsoriginal style To add the transformation effect of multiple styles, the added attributes are separated by commas: Added width, height and conversion effect: The following table lists all the transition properties: Attribute Description CSS Transition Shorthand property, which is used to set four transition properties in one property. 3 Transition-property Specifies the name of the CSS attribute to which the transition is applied. 3 Transition-duration Define the time spent on the transition effect. The default is 0. 3 Transition-timing-function Specify the time curve of the transition effect. Default is “ease”. 3 Transition-delay Stipulate when the transition effect begins. The default is 0. 3 The following two examples set all transition properties: Use all transition properties in one example: The transition effect is the same as the above example, but using the abbreviated In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. div:hover
{
width:300px;
}
8.12.4. Multiple changes ¶
Example ¶
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
8.12.5. Transition attribute ¶
Example ¶
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
Example ¶
transition attributes:div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Principles, Technologies, and Methods of Geographic Information Systems
102