CSS3 Transition Tutorial: Learn CSS3 Transition Property, CSS3 Transition Property Reference Guide, Know what is CSS Transition Property and, CSS3 Transition property examples, Learn CSS3 Transition Effects. In this page to learn the Transition Property definition, how to use CSS3 Transition Property on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
Define CSS3 Transition Property and its Usage?
CSS3 Transition: with the use of CSS3 Transition property we can easily add an effect to an element when it changes from one style to another style without using any javascript or flash script.
Properties of CSS3 Transition- Transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Changing some properties of an element with CSS3 Transition Effect
Transition Example
width: 150px;
height: 100px;
background: #16a085;
color: #fff;
padding-top 20px;
-webkit-transition: background 1s,color 1s,width 1s,height 1s;
transition-property: background,color,width,height;
transition-duration: 1s,1s,1s,1s;
}
.example-div:hover {
background: #1ec7e6;
width: 200px;
height: 110px;
color: brown;
}
Changing multiple properties of an element with CSS3 Transition Effect
Transition Example
width: 150px;
height: 100px;
padding: 10px;
float: left;
background: #16a085;
color: #fff;
position: absolute;
font-weight: bold;
font-size: 25px;
margin: 5px;
-webkit-border-radius: 5px;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,color 1s,width 1s,height 1s,font-size 1s;
border-radius: 5px;
opacity: 0.8;
text-shadow: 1px 0px 2px #000;
}
.animated-box:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0.9;
background: #1ec7e6;
width: 200px;
height: 100px;
font-size: 30px;
color: brown;
}
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.