CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.What Are CSS3 Transitions?
CSS3 transitions are effects that let an element gradually change from one style to another.To do this, you must specify two things:
- the CSS property you want to add an effect to
- the duration of the effect
Example
Add a transition effect on the width property, with a duration
of 2 seconds:
div
{
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
The transition effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:
Example
Specify :hover for <div> elements:
div:hover
{
width: 300px;
}
width: 300px;
}
Multiple Changes
To add transition effects for more than one CSS property, separate the properties with a comma:Example
Add transition effects on width, height, and transformation:
div
{
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
More Transition Examples
The example below uses all the four transition properties:Example
div
{
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
/* Standard syntax */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
/* Standard syntax */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
Try it yourself »
Example
div
{
-webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s linear 2s;
}
-webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s linear 2s;
}
CSS3 Transition Properties
The following table lists all the transition properties:Property | Description | CSS |
---|---|---|
transition | A shorthand property for setting the four transition properties into a single property | 3 |
transition-delay | Specifies when the transition effect will start | 3 |
transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete | 3 |
transition-property | Specifies the name of the CSS property the transition effect is for | 3 |
transition-timing-function | Specifies the speed curve of the transition effect | 3 |
https://www.welookups.com/cssref/css3_pr_transition-timing-function.html
ReplyDelete