css3 Transition:
- Without using JavaScript or Flash animations, CSS3 is the ability to apply animations to the instruct elements. IE9 still won’t support CSS transitions.
- CSS3 transitions are effects that let an element gradually change from one style to another.
- Let’s try for the simple effect. When you hover a link in a sidebar, the text will slide to the right ever slightly.
The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:
Syntax:1
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
Specify :hover for <div> elements:
div:hover
{
width:300px;
}
Example:
ul a {
-webkit-transition: padding .5s;
-moz-transition: padding .5s;
-o-transition: padding .5s;
transition: padding .5s;
}
a: hover { padding-left: 6px; }
HTML:
<ul>
<li> <a href="#"> One Over Me </a></li>
<li> <a href="#"> Two Over Me </a> </li>
<li> <a href="#"> Three Over Me </a> </li>
<li> <a href="#"> Four Over Me </a> </li>
<li> <a href="#"> Five Over Me </a> </li>
</ul>
Note: We don’t directly apply the transition to the hover state of the anchor tag, because, if we did, the animation would only take effect during mouseover. On mouseout, the element would immediately return to its intial state.
Transition will accept three parameters:
- The property to transition. (Set this value to all if needed)
- The duration
- The easing type
Browser Support:
Internet Explorer does not yet support the transition property.Firefox 4 requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Opera requires the prefix -o-.
B. Multiple changes:
To add a transitional effect for more than one style, add more properties, separated by commas:Sytax: Add effects on the width, height, and the transformation:
div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
The following table lists are the transition properties:
| Property | Description |
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-property | Specifies the name of the CSS property to which the transition is applied |
| transition-duration | Defines the length of time that a transition takes. Default 0 |
| transition-timing-function | Describes how the speed during a transition will be calculated. Default "ease" |
| transition-delay | Defines when the transition will start. Default 0 |
Example:1
Use all transition properties in one example:div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
Example:2
The same transition effects as above, using the shorthand transition property:div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
10. Horizontally and Vertically Centered:
By using flexible box model we can create data perfectly in center. Due to containing this data we can use the body element as a wrapper.Step 1: Create a container .box, and then add two divs: one for the front size, and the other for the back.
HTML:
<body>
<div class="box">
<div>Hello</div>
<div> World </div>
</div>
</body>
Syntax: css
body, html { height: 100%; width: 100%; }
body {
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
}
11. Styling the Box: Transition
If the instructed element have any changes to their state, then the change can possible by transition (transition: all 1s).Syntax: css
.box {
background: #e3e3e3;
border: 1px dashed #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
9. An Effective Shadow:
We learned earlier about shadow of box by by using the: after pseudo class.Syntax: css
.box:after {
box-shadow: 0 9px 20px rgba(0, 0, 0, 0.4);
content: "";
height: 10px;
left: 15%;
position: absolute;
top: 95%;
width: 70%;
z-index: -1;
}
10. Styling of the instruct Children Divs: Text Transitions
The children divs take place right on top of each other. Let’s position them absolutely, and instruct them to take up all available space.11. Rotating the Card :
when we hover over the card, it should flip around, and display the “back-side” of the card (at the least the illusion of the “back-side”). For this effect, use transformations and the rotateY function.Syntax1: css
.box:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Example3: Transition-rotate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-rotate </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background:#663366;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer, Firefox and Opera does not support the rotateX method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>
Example4: Transition-linear
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-linear </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background: #663366;
transition-property:width 1s linear 1s;
/* Firefox 4 */
-moz-transition:width 1s linear 1s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 1s;
/* Opera */
-o-transition:width 1s linear 1s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div>Hello. Hover over the div element above, to see the transition effect.</div>
<div id="div2">World. The transition effect will wait 2 seconds before starting.</div>
</body>
</html>
No comments:
Post a Comment